hover时连续的CSS旋转animation，hover在0deg上的animation

当你无限期地hover在它上面时，我有一个元素会旋转。 当你hover，animation停止。 简单：

@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .elem:hover { -webkit-animation-name: rotate; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } 

但是，当你hover时，animation突然停止，回到0度。 我想回到那个位置，但是在编写语法时遇到一些麻烦。

任何input将是真棒！

Answer 1

解决方法是在您的.elem中设置默认值。 但是这个annimation在-moz下工作正常，但是在-webkit中还没有实现

看看我从你更新的小提琴： http : //jsfiddle.net/DoubleYo/4Vz63/1648/

它适用于Firefox而不是Chrome

 .elem{ position: absolute; top: 40px; left: 40px; width: 0; height: 0; border-style: solid; border-width: 75px; border-color: red blue green orange; transition-property: transform; transition-duration: 1s; } .elem:hover { animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } 

 <div class="elem"></div> 

Answer 2

这是一个简单的工作解决scheme：

 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } .elem:hover { -webkit-animation:spin 1.5s linear infinite; -moz-animation:spin 1.5s linear infinite; animation:spin 1.5s linear infinite; } 

Answer 3

它花了几次尝试，但我能让你的jsFiddle工作（仅用于Webkit）。

当用户重新inputdiv时，animation速度仍然存在问题。

基本上，只需将当前的旋转值设置为一个variables，然后对该值进行一些计算（以转换为度数），然后将该值设置回鼠标移动时的元素并进入鼠标。

看看jsFiddle： http : //jsfiddle.net/4Vz63/46/

查看本文以获取更多信息，包括如何添加跨浏览器兼容性： http : //css-tricks.com/get-value-of-css-rotation-through-javascript/

Answer 4

你应该触发animation，一旦它完成W / JavaScript恢复。

  $(".item").live("animationend webkitAnimationEnd", function(){ $(this).removeClass('animate'); }); 

Answer 5

这是一个JavaScript实现，可与web-kit一起使用：

 var isHovering = false; var el = $(".elem").mouseover(function(){ isHovering = true; spin(); }).mouseout(function(){ isHovering = false; }); var spin = function(){ if(isHovering){ el.removeClass("spin"); setTimeout(function(){ el.addClass("spin"); setTimeout(spin, 1500); }, 0); } }; spin(); 

JSFiddle： http : //jsfiddle.net/4Vz63/161/

BARF。

Answer 6

 <script> var deg = 0 function rotate(id) { deg = deg+45; var txt = 'rotate('+deg+'deg)'; $('#'+id).css('-webkit-transform',txt); } </script> 

我所做的事情是非常简单的…在开始的时候声明一个全局variables，然后增加variables，然后使用jQuery的.css来递增。