Bagaimanakah Anda Boleh Menyimpan Elemen dalam Keadaan Akhir Animasinya dengan CSS?

Mengekalkan Keadaan Animasi dengan CSS

Dalam CSS3, animasi menambah pergerakan dinamik pada elemen, tetapi isu biasa timbul apabila animasi kembali kepada keadaan asalnya setelah selesai. Ini boleh menjadi masalah untuk senario di mana hasil yang diingini ialah perubahan kekal.

Pertimbangkan animasi CSS berikut:

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(100px);
  }
}</code>

Animasi ini menurunkan elemen 100px ke bawah. Walau bagaimanapun, selepas animasi selesai, elemen kembali ke kedudukan asalnya.

Penyelesaian: Menggunakan -webkit-animation-fill-mode

Untuk mengekalkan keadaan akhir animasi, CSS menyediakan -webkit-animation-fill-mod property. Sifat ini mengawal perkara yang berlaku kepada elemen sebelum dan selepas animasi berlaku. Dengan menetapkannya ke hadapan, elemen kekal dalam keadaan akhir selepas animasi membuat kesimpulan:

<code class="css">-webkit-animation-fill-mode: forwards;</code>

Pendekatan ini memastikan elemen animasi mengekalkan kedudukannya yang diubah suai walaupun selepas animasi telah selesai. Ia membolehkan perubahan yang lancar dan berterusan pada penampilan elemen, menjadikan animasi yang kompleks lebih berharga melangkaui proses bulat.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menyimpan Elemen dalam Keadaan Akhir Animasinya dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!