Simpan animasi CSS dalam keadaan akhir di penghujung

Question

Saya menjalankan animasi pada beberapa elemen yang ditetapkan kepada opacity:0 dalam CSS. Kelas animasi digunakan pada acara onClick, menggunakan bingkai utama, yang mengubah kelegapan daripada 0 kepada 1 (serta beberapa perubahan lain). Malangnya, apabila animasi tamat, elemen itu kembali kepada keadaan kelegapan:0 (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? Kod (tidak termasuk versi awalan): @keyf

P粉239089443 · Answer

Jika anda menggunakan lebih banyak sifat animasi, anda boleh menggunakan pendek :

animation: bubble 2s linear 0.5s 1 normal forwards;

Tetapkan seperti ini:

bubble Nama animasi
2s Tempoh
linear Fungsi masa
0.5s Kelewatan
1 迭代次数（可以是 'infinite')
normal arah
forwards mod 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:

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

Arahan yang tersedia:

normal | reverse | alternate | alternate-reverse

P粉564301782 · Answer

Cuba tambah animation-fill-mode: forwards;. Sebagai contoh, anda boleh menggunakan singkatan seperti ini:

animation: bubble 1.0s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode