悬停后如何在鼠标移开时反转动画 [英] How to reverse an animation on mouse out after hover

问题描述

因此，可以在鼠标移开时使用反向动画，例如:

So, it is possible to have reverse animation on mouse out such as:

.class{
   transform: rotate(0deg);

}
.class:hover{
   transform: rotate(360deg);
}

但是，当使用@keyframes 动画时，我无法让它工作，例如:

but, when using @keyframes animation, I couldn't get it to work, e.g:

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

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

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

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

知道我需要迭代和动画本身的最佳解决方案是什么?

What is the optimal solution, knowing that I'd need iterations and animation itself?

http://jsfiddle.net/khalednabil/eWzBm/

推荐答案

我认为如果你有一个to，你必须使用一个from.我会想到类似的东西:

I think that if you have a to, you must use a from. I would think of something like :

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

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

当然肯定已经检查过了，但我发现奇怪的是您只使用 transform 属性，因为 CSS3 并未在所有地方完全实现.考虑到以下因素，它可能会更好地工作:

Of course must have checked it already, but I found strange that you only use the transform property since CSS3 is not fully implemented everywhere. Maybe it would work better with the following considerations :

• Chrome 使用 @-webkit-keyframes，不需要特定版本
• Safari 从 5+ 版本开始使用 @-webkit-keyframes
• Firefox 从 16 版开始使用 @keyframes(v5-15 使用 @-moz-keyframes)
• Opera 使用 @-webkit-keyframes 版本 15-22(仅 v12 使用 @-o-keyframes)
• Internet Explorer 从 10+ 版本开始使用 @keyframes

• Chrome uses @-webkit-keyframes, no particuliar version needed
• Safari uses @-webkit-keyframes since version 5+
• Firefox uses @keyframes since version 16 (v5-15 used @-moz-keyframes)
• Opera uses @-webkit-keyframes version 15-22 (only v12 used @-o-keyframes)
• Internet Explorer uses @keyframes since version 10+

我想出了那个小提琴:

http://jsfiddle.net/JjHNG/35/

使用最少的代码.是否接近您的预期?

Using minimal code. Is it approaching what you were expecting ?

这篇关于悬停后如何在鼠标移开时反转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！