Bagaimanakah Saya Boleh Membuat Animasi CSS3 Tetap pada Bingkai Terakhirnya?

Menghentikan Animasi CSS3 pada Bingkai Terakhirnya

Untuk mengelakkan elemen animasi daripada kembali kepada keadaan asalnya selepas animasi selesai, anda boleh gunakan sifat mod-isi-animasi. Sifat ini mengawal gelagat elemen selepas animasi telah tamat.

Penyelesaian:

Untuk menghentikan animasi pada bingkai terakhirnya (100%), nyatakan nilai ke hadapan untuk sifat mod-isi-animasi. Ini akan mengarahkan penyemak imbas untuk mengekalkan keadaan akhir animasi selepas ia selesai.

Berikut ialah kod CSS yang dikemas kini dengan nilai ke hadapan ditambah:

@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); }
}

.animated-element {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
  /* Optional: remove the element after the animation finishes */
  transition: 0.5s ease opacity;
  animation-end: hide-element;
}

@keyframes hide-element {
  100% {
    opacity: 0;
  }
}

Dengan menggunakan animasi-fill- mod: ke hadapan, elemen akan kekal dalam keadaan berubah selepas animasi selesai. Selain itu, peralihan CSS pilihan dan bingkai kekunci akhir animasi boleh digunakan untuk memadamkan atau mengalih keluar elemen sebaik sahaja animasi selesai.

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