Bagaimana untuk Membalikkan Animasi Kerangka Kunci CSS pada Tetikus Keluar?

Animasi Songsang pada Tetikus Keluar selepas Tuding menggunakan Kerangka Kunci

Anda sedang mencari penyelesaian untuk membalikkan animasi putaran apabila tetikus keluar selepas menuding unsur. Walaupun mungkin menggunakan transformasi CSS tradisional, anda telah menghadapi masalah semasa melaksanakannya dengan animasi @keyframes.

Penyelesaian optimum melibatkan penggunaan kedua-dua nilai "kepada" dan "daripada" dalam bingkai utama. Kod yang diperbetulkan ialah:

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

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

Walau bagaimanapun, adalah penting untuk mempertimbangkan keserasian penyemak imbas. Walaupun CSS3 disokong secara meluas, adalah disyorkan untuk menggunakan awalan vendor untuk keserasian maksimum:

@-webkit-keyframes in { /* Safari, Chrome */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-webkit-keyframes out { /* Safari, Chrome */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

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

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

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

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

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