CSS3：鼠标反转动画出来后悬停 [英] CSS3: reverse 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);}
}

那么什么是最佳的解决方案，因为他们知道我需要迭代和动画本身...

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

感谢

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

推荐答案

我认为，如果你有一个到，你必须使用从。
我想的是这样的：

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

当然必须已经检查了它，但我发现奇怪，你只能使用变换属性，因为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的关键帧，没有particuliar版本需要


• Safari使用 @ - WebKit的关键帧从版本5 +


• Firefox使用 @keyframes 因为版本16（使用v5-15 @ - MOZ关键帧）


• Opera使用 @ - WebKit的关键帧 15-22版本（仅用于V12 @ - 邻关键帧）


• Internet Explorer使用 @keyframes ，因为10版+

• 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/

使用最少code。难道是接近你期待什么呢？

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

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