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

编辑:

我想出了那个小提琴:

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

使用最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; } 

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

尝试这个:

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