How to Reverse CSS Keyframes Animation on Mouse Out?

Reverse Animation on Mouse Out after Hover using Keyframes

You're seeking a solution to reverse the rotation animation upon mouse out after hovering an element. While it's possible using traditional CSS transforms, you've encountered issues when implementing it with @keyframes animation.

The optimal solution involves using both the "to" and "from" values within the keyframes. The corrected code would be:

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

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

However, it's important to consider browser compatibility. While CSS3 is widely supported, it's recommended to use vendor prefixes for maximum compatibility:

@-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);
}

The above is the detailed content of How to Reverse CSS Keyframes Animation on Mouse Out?. For more information, please follow other related articles on the PHP Chinese website!