Continuous hover CSS rotation animated to 0deg on hover

Question

I have an element that rotates when you are forever above it for an indefinite period. When you hover over, the animation stops. Plain:

@-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; } 

When you exit, the animation abruptly stops, returning to 0 degrees. I would like to revive this position, but I had problems with syntax development.

Any input would be awesome!

Answer 1

The solution is to set the default value in your .elem. But this revocation works fine with -moz but not yet implemented in -webkit

Take a look at the script I updated from yours: http://jsfiddle.net/DoubleYo/4Vz63/1648/

It works fine with Firefox, but not with 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

Here's a simple working solution:

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

It took a few tries, but I was able to get your jsFiddle to work (only for Webkit).

There is still a problem with the animation speed when the user re-enters the div.

Basically, just set the current rotation value for a variable, then do some calculations on that value (to convert to degrees), then set that value back to the mouse and mouse move element.

Check out jsFiddle: http://jsfiddle.net/4Vz63/46/

Check out this article for more information, including how to add cross-browser compatibility: http://css-tricks.com/get-value-of-css-rotation-through-javascript/

Answer 4

You must make the animation return after w / javascript is complete.

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

Answer 5

Here is the javascript implementation that works with the 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> 

What I am doing is very simple ... declare a global variable at the beginning ... and then increment the variable as I like and use .css jquery to increment.