How to Reverse CSS Keyframes Animation on Mouse Out?-CSS Tutorial-php.cn

How to Reverse CSS Keyframes Animation on Mouse Out?

Barbara Streisand

Release： 2024-12-18 04:53:13

Original

967 people have browsed it

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

Copy after login

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

Copy after login

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!