Simpan animasi CSS dalam keadaan akhir di penghujung
P粉950128819
2023-08-20 18:36:55
<p>Saya menghidupkan beberapa elemen yang ditetapkan kepada <kod>opacity: 0;</code> Kelas animasi digunakan pada acara onClick, menggunakan bingkai utama, yang menukar kelegapan daripada <code>0</code> kepada <code>1</code> </p>
<p>Malangnya, apabila animasi tamat, elemen kembali ke keadaan <kod>kelegapan: 0</code> (dalam kedua-dua Firefox dan Chrome). Naluri saya ialah elemen animasi akan kekal dalam keadaan terakhirnya, mengatasi sifat asalnya. Bukankah ini benar? Jika tidak, bagaimana saya boleh mengekalkan elemen dalam keadaan terakhirnya? </p>
<p>Kod (tidak termasuk versi awalan): </p>
<pre class="brush:php;toolbar:false;">@keyframes gelembung {
0% { transform:skala(0.5);
50% { transform:skala(1.2);
100% { transform:skala(1.0);
}</pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda menggunakan lebih banyak sifat animasi, anda boleh menggunakan pendek :
Tetapkan seperti ini:
bubbleNama animasi2sTempohlinearFungsi masa0.5sKelewatan1迭代次数（可以是 'infinite')normalarahforwardsmod isian (tetapkan kepada 'ke belakang' jika anda mahukan keserasian dengan menggunakan kedudukan akhir sebagai keadaan akhir [ini adalah untuk menyokong pelayar dengan animasi dimatikan] {hanya untuk menjawab tajuk, bukan kes khusus anda})Fungsi masa yang tersedia:
Arahan yang tersedia:
Cuba tambah
animation-fill-mode: forwards;. Sebagai contoh, anda boleh menggunakan singkatan seperti ini:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode