Bagaimanakah Saya Boleh Memaksa Penyiapan Animasi Hover CSS3?

Paksa Siapkan Animasi CSS3 pada Hover

Apabila menggunakan animasi CSS3 pada keadaan :hover, animasi berhenti secara tiba-tiba apabila keluar dari elemen . Tingkah laku ini boleh menjadi tidak diingini, terutamanya untuk animasi yang memerlukan bilangan lelaran tertentu untuk dilaksanakan. Untuk menangani perkara ini, pertimbangkan strategi berikut:

Menggunakan JavaScript:

Penyelesaian paling langsung melibatkan penggunaan JavaScript untuk memaksa penyiapan animasi. Ini boleh dicapai dengan menambah dan mengalih keluar kelas animasi secara dinamik melalui pendengar acara.

$(".element").hover(
  function() { $(this).addClass("animation-name"); },
  function() { $(this).removeClass("animation-name"); }
);

Menggunakan Kerangka Kunci CSS:

Walaupun pada masa ini tiada penyelesaian CSS sahaja yang secara langsung memaksa penyiapan animasi pada tuding, satu teknik melibatkan mencipta kerangka kunci tiruan yang melangkaui animasi tuding tempoh.

@keyframes bounce {
  ... (Original animation keyframes) ...
  99% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

Dengan memanjangkan sedikit tempoh bingkai utama, animasi akan diteruskan sehingga siap walaupun selepas keadaan tuding telah tamat.

Kaveat Berpotensi:

Perlu ambil perhatian bahawa pemaksaan penyiapan animasi boleh memperkenalkan artifak visual dalam kes tertentu. Contohnya, jika animasi mengandungi elemen berputar, hentian atau lompatan secara tiba-tiba mungkin berlaku apabila tetikus keluar dari elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaksa Penyiapan Animasi Hover CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!