Bagaimana untuk Membalikkan Animasi CSS pada Mouse Out Menggunakan @keyframes?

Cara Melaksanakan Animasi Songsang pada Tetikus Keluar selepas Tuding

Dalam reka bentuk web, animasi memainkan peranan penting dalam meningkatkan pengalaman pengguna. Satu senario biasa ialah melayang elemen untuk mencetuskan animasi, biasanya putaran. Walau bagaimanapun, membalikkan animasi pada tetikus keluar boleh terbukti mencabar, terutamanya apabila menggunakan @keyframes CSS3.

Memandangkan contoh CSS yang disediakan, di mana semasa tuding elemen berputar 360 darjah, matlamatnya adalah untuk memutarkannya kembali ke 0 darjah pada tetikus keluar. Menggunakan animasi @keyframes, nampaknya kesan yang diingini tidak dapat dicapai.

Penyelesaian terletak pada memahami sifat animasi-arah. "Ke" mewakili keadaan akhir animasi, manakala "dari" menentukan keadaan permulaan. Dengan memasukkan kata kunci "daripada" dalam definisi @keyframes kami, kami boleh mencipta animasi terbalik:

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

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

Selain itu, keserasian merentas penyemak imbas boleh dipastikan dengan menggunakan awalan vendor:

@-webkit-keyframes in {
    ...
}

@-webkit-keyframes out {
    ...
}

Untuk meningkatkan lagi animasi, adalah penting untuk menentukan arah animasi harta:

.class {
    animation-direction: alternate;
}

Dengan cara ini, animasi akan beralih dengan lancar daripada "masuk" kepada "keluar" apabila tetikus bergerak keluar dari sempadan elemen.

Melaksanakan pendekatan ini menghasilkan kelancaran dan animasi songsang yang cekap yang bertindak balas kepada pergerakan tetikus dengan tepat. Berikut ialah demonstrasi:

http://jsfiddle.net/JjHNG/35/

Atas ialah kandungan terperinci Bagaimana untuk Membalikkan Animasi CSS pada Mouse Out Menggunakan @keyframes?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!