Bagaimanakah Saya Boleh Menghentikan Animasi CSS3 pada Bingkai Akhirnya?

Hentikan Animasi CSS3 pada Bingkai Akhirnya

Apabila bekerja dengan animasi CSS3, adalah wajar untuk membekukan animasi secara kekal pada penghujung bingkai terakhirnya. Ini amat berguna untuk animasi yang mengalihkan elemen di luar skrin.

Satu kaedah untuk mencapai ini ialah dengan menggunakan sifat mod isian animasi. Apabila ditetapkan kepada ke hadapan, ia memastikan elemen mengekalkan rupa bingkai animasi terakhirnya walaupun selepas kitaran animasi selesai.

Sebagai contoh, dalam animasi yang diberikan dengan bingkai utama bernama "perubahan warna":

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Untuk menghentikan animasi secara kekal pada bingkai akhir, tambah mod-isi-animasi: ke hadapan; kepada elemen animasi:

.animated-element {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

Ini akan memastikan bahawa sebaik sahaja animasi selesai, elemen itu kekal berskala kepada 0.5, diputar sebanyak 5 darjah dan diterjemahkan ke kedudukan akhir yang dinyatakan dalam rangka utama 100%.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghentikan Animasi CSS3 pada Bingkai Akhirnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!