Simpan animasi CSS dalam keadaan akhir di penghujung

Question

Saya menghidupkan beberapa elemen yang ditetapkan kepada opacity: 0; Kelas animasi digunakan pada acara onClick, menggunakan bingkai utama, yang menukar kelegapan daripada 0 kepada 1

Malangnya, apabila animasi tamat, elemen kembali ke 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):

@keyframes gelembung {
    0% { transform:skala(0.5);
    50% { transform:skala(1.2);
    100% { transform:skala(1.0);
}

Answer 1

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

Answer 2

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