Bagaimanakah saya boleh membuat animasi CSS Webkit saya melekat pada keadaan akhir mereka?

Memelihara Keadaan Akhir Animasi CSS Webkit: Penyelesaian Berterusan

Isu ini berpunca daripada sifat sementara animasi CSS3, di mana ianya seketika ubah gaya elemen dan kembali ke tetapan awal setelah selesai. Ini boleh mengakibatkan peralihan mendadak atau ketidakkonsistenan visual. Untuk menangani perkara ini, Webkit memperkenalkan penyelesaian melalui sifat -webkit-animation-fill-mode.

Jawapan:

Menggunakan mod -webkit-animation-fill-fill, pembangun boleh mencapai keadaan akhir melekit untuk animasi mereka. Dengan menetapkannya kepada "ke hadapan," gaya diubah yang digunakan semasa animasi berterusan walaupun selepas animasi telah tamat. Ini memastikan elemen mengekalkan kedudukan penghujungnya.

Contoh:

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

Dalam contoh ini, teks "Hello world" akan bernyawa seperti yang dijangkakan, menurunkan 100px ke bawah. Walau bagaimanapun, tidak seperti senario awal, ia akan kekal dalam kedudukan akhir ini, menghalang sebarang lompatan yang tidak diingini atau peralihan mengejut.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat animasi CSS Webkit saya melekat pada keadaan akhir mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!