CSS3：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/

我觉得如果你有一个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

编辑：

我想出了那个小提琴：

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

我不认为这是可以实现的只使用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'); } );

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

animation-direction: reverse

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

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

尝试这个：

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