Bagaimana untuk Memulakan Semula Animasi CSS3 Dengan Cekap Tanpa Menggunakan Tamat Masa?

Mengulas Semula Mulakan Semula Animasi CSS3: Membongkar Pendekatan Alternatif

Memulakan semula animasi CSS3 boleh menimbulkan cabaran, terutamanya apabila cuba memulihkan skala elemen dan menghidupkannya kembali kepada keadaan asalnya . Walaupun mengalih keluar dan memasukkan semula elemen menawarkan penyelesaian, ia mungkin bukan penyelesaian yang paling berkesan.

Pendekatan yang lebih elegan melibatkan memanfaatkan aliran semula untuk menggunakan perubahan tanpa bergantung pada tamat masa. Fungsi JavaScript berikut menunjukkan teknik ini:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

Bersempena dengan CSS dan HTML di bawah, fungsi ini membenarkan tetapan semula animasi yang lancar apabila mengklik:

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div>

Oleh mencetuskan aliran semula, animasi ditetapkan semula tanpa memerlukan kelewatan atau pemasaan yang kompleks. Pendekatan ini menyediakan penyelesaian yang bersih dan cekap untuk memulakan semula sebarang animasi CSS3.

Atas ialah kandungan terperinci Bagaimana untuk Memulakan Semula Animasi CSS3 Dengan Cekap Tanpa Menggunakan Tamat Masa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!