悬停后如何在鼠标移出时反转动画

问题描述

因此，有可能在鼠标移出时产生反向动画，例如：

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?

推荐答案

我认为，如果您有一个到，您必须使用 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 ，不需要特定版本


• 自版本5+起，Safari使用 @-webkit-keyframes


• Firefox自版本16开始使用了 @keyframes （v5-15使用了 @-moz-keyframes ）


• Opera使用 @-webkit-keyframes 版本15-22（仅v12使用 @-o-keyframes ）


• 自版本10+起，Internet Explorer使用 @关键帧

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

编辑：

我想出了那个小提琴：

使用最少的代码。是否达到您的预期？

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

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