Bagaimanakah Saya Boleh Membalikkan Animasi Kerangka Kunci CSS dengan Lancar pada Tetikus Keluar?

Pembalikan Animasi pada Tetikus Keluar: Menangani Cabaran

Dalam bidang animasi web, mencapai pembalikan animasi yang lancar pada tetikus keluar boleh satu usaha yang rumit, terutamanya apabila menggunakan animasi bingkai utama. Mari kita terokai soalan asal dan penyelesaiannya, menyelidiki selok-belok kerangka utama CSS untuk hasil yang optimum.

Masalahnya

Seperti yang digariskan dalam siasatan awal, cuba untuk cipta animasi keluar tetikus yang membalikkan animasi tuding menggunakan bingkai utama telah terbukti mencabar. Coretan kod menunjukkan animasi putaran transformasi asas yang berfungsi pada tuding tetapi tidak kembali kepada keadaan asal apabila tetikus keluar.

Penyelesaian

Kunci untuk mencapai pembalikan animasi yang dikehendaki terletak pada penggunaan kedua-dua sifat "dari" dan "kepada" dalam pengisytiharan kerangka utama. Dengan menyatakan keadaan perubahan awal ("dari") dalam bingkai utama "masuk" dan keadaan transformasi akhir ("ke") dalam bingkai utama "keluar", kami mencipta peralihan yang lancar antara keduanya dengan berkesan.

Pelaksanaan Optimum

Untuk memastikan keserasian merentas penyemak imbas, adalah penting untuk menggunakan sintaks kerangka utama yang betul untuk penyemak imbas yang berbeza. Berikut ialah kod CSS yang dikemas kini yang mengambil kira pertimbangan ini:

@-webkit-keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@-moz-keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@-o-keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@keyframes in {
  from: transform: rotate(0deg);
  to: transform: rotate(360deg);
}

@-webkit-keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

@-moz-keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

@-o-keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

@keyframes out {
  from: transform: rotate(360deg);
  to: transform: rotate(0deg);
}

Kod ini memastikan bahawa animasi akan berfungsi dengan betul dalam penyemak imbas utama, memberikan pengalaman animasi yang lancar yang beralih dengan lancar daripada tuding kepada bukan tuding negeri.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membalikkan Animasi Kerangka Kunci CSS dengan Lancar pada Tetikus Keluar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!