How to Create a Reverse CSS Animation on Mouseout?

Reverse Animation on Mouse Out After Hover

You've encountered an issue while attempting to create a reverse animation on mouse out using CSS animations. Let's delve into the problem and provide an optimal solution.

In your initial code, you used a simple CSS transform animation with a "rotate" property, and the "in" and "out" keyframes had "to" values to define the rotation. However, when using @keyframes animation, you need to specify both "from" and "to" values within the keyframes to create a transition effect.

The optimal solution, which incorporates your need for iterations and animation, is to revise the @keyframes rules as follows:

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

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

With this code, the "in" keyframe starts from zero rotation and goes to 360 degrees rotation, while the "out" keyframe starts from 360 degrees rotation and goes back to zero rotation, creating the desired reverse effect on mouse out.

Browser Compatibility Considerations:

Remember that CSS3 is not fully implemented universally. To ensure cross-browser compatibility, you may need to use different @keyframes syntax for different browsers:

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

To further enhance the code, you can also specify the animation duration and iteration count within the CSS rules.

Here's a code snippet that implements these improvements:

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

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