Bagaimana untuk Mencipta Animasi CSS Songsang pada Mouseout?

Animasi Songsang pada Tetikus Keluar Selepas Tuding

Anda telah menghadapi masalah semasa cuba mencipta animasi terbalik pada tetikus keluar menggunakan animasi CSS . Mari kita selidiki masalah ini dan berikan penyelesaian yang optimum.

Dalam kod awal anda, anda menggunakan animasi transformasi CSS mudah dengan sifat "putar" dan bingkai utama "masuk" dan "keluar" mempunyai "ke" nilai untuk menentukan putaran. Walau bagaimanapun, apabila menggunakan animasi @keyframes, anda perlu menentukan nilai "dari" dan "kepada" dalam bingkai utama untuk mencipta kesan peralihan.

Penyelesaian optimum, yang menggabungkan keperluan anda untuk lelaran dan animasi, ialah untuk menyemak peraturan @keyframes seperti berikut:

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

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

Dengan kod ini, kerangka utama "dalam" bermula daripada putaran sifar dan pergi kepada putaran 360 darjah, manakala kerangka utama "keluar" bermula daripada putaran 360 darjah dan kembali kepada putaran sifar, menghasilkan kesan songsang yang diingini pada tetikus keluar.

Pertimbangan Keserasian Penyemak Imbas:

Ingat bahawa CSS3 tidak dilaksanakan sepenuhnya secara universal. Untuk memastikan keserasian merentas pelayar, anda mungkin perlu menggunakan sintaks @keyframes yang berbeza untuk penyemak imbas yang berbeza:

• Chrome, Safari (v5 ): @-webkit-keyframes
• Firefox (v16 ): @keyframes (v5-15: @-moz-keyframes)
• Opera (v15-22): @-webkit-keyframes (v12: @-o-keyframes)
• Internet Explorer (v10 ): @keyframes

Untuk meningkatkan lagi kod, anda juga boleh menentukan tempoh animasi dan kiraan lelaran dalam peraturan CSS.

Berikut ialah coretan kod yang melaksanakan penambahbaikan ini:

.class {
    animation-name: out;
    animation-duration: 2s;
}

.class:hover {
    animation-name: in;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

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

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi CSS Songsang pada Mouseout?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!