hover后如何在鼠标上反转animation

所以，有可能在鼠标上有反转animation，例如：

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

但是，当使用@keyframesanimation，我无法得到它的工作，例如：

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

什么是最佳的解决scheme，知道我需要迭代和animation本身？

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

Answer 1

我觉得如果你有一个to ，你必须用一个from 。 我会想到这样的事情：

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

当然，必须已经检查过了，但是我发现奇怪的是你只使用了transform属性，因为CSS3并没有完全实现。 也许这会更好地与以下考虑：

• 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

编辑：

我想出了那个小提琴：

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

使用最less的代码。 它接近你所期望的吗？

Answer 2

我不认为这是可以实现的只有CSSanimation。 我假定CSS转换不能满足您的使用情况，因为（例如）您想要将两个animation链接在一起，使用多个停止，迭代或以其他方式利用额外的动力animation授予您。

我还没有find任何方法来触发一个CSSanimation，特别是在没有使用JavaScript来附加“over”和“out”类的情况下。 尽pipe当hover结束时，您可以使用基本CSS声明触发animation，然后在页面加载时运行相同的animation。 使用“over”和“out”类，您可以将定义拆分为基本（加载）声明和两个animation触发器声明。

这个解决scheme的CSS将是：

 .class { /* base element declaration */ } .class.out { animation-name: out; animation-duration:2s; } .class.over { 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); } } 

并使用JavaScript（jQuery语法）将类绑定到事件：

 $(".class").hover( function () { $(this).removeClass('out').addClass('over'); }, function () { $(this).removeClass('over').addClass('out'); } ); 

Answer 3

如果只有一个animation，你会更好吗？

 animation-direction: reverse 

Answer 4

它比这一切简单得多：简单地转换元素上的相同属性

 .earth { width: 0.92%; transition: width 1s; } .earth:hover { width: 50%; transition: width 1s; } 

https://codepen.io/lafland/pen/MoEaoG

Answer 5

尝试这个：

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

支持Firefox 5+，IE 10+，Chrome，Safari 4+，Opera 12+