Continuous CSS rotation animation on hover animated back to 0deg on hover out

Question

I have an element that spins when you hover over it indefinitely  When you hover out  the animation stops  Simple    -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 hover out  though  the animation abruptly ceases  reverting to 0 degrees  I d like to animate back to that position  but I m having some trouble working out the syntax   Any input would be awesome

User · Answer

Here s a javascript implementation that works with 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

User · Answer

lt script gt  var deg   0  function rotate id        deg   deg 45      var txt    rotate   deg  deg              id  css  -webkit-transform  txt      lt  script gt    What I do is something very easy    declare a global variable at the start    and then increment the variable however much I like  and use  css of jquery to increment

User · Answer

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

User · Answer

It took a few tries  but I was able to get your jsFiddle to work  for Webkit only    There s still an issue with the animation speed when the user re-enters the div   Basically  just set the current rotation value to a variable  then do some calculations on that value  to convert to degrees   then set that value back to the element on mouse move and mouse enter   Check out the 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

User · Answer

The solution is to set the default value in your  elem  But this annimation work fine with -moz but not yet implement in -webkit  Look at the fiddle I updated from yours   http   jsfiddle net DoubleYo 4Vz63 1648   It works fine with Firefox but not with Chrome   x000D   x000D   elem  x000D      position  absolute  x000D      top  40px  x000D      left  40px  x000D      width  0   x000D      height  0  x000D      border-style  solid  x000D      border-width  75px  x000D      border-color  red blue green orange  x000D      transition-property  transform  x000D      transition-duration  1s  x000D    x000D   elem hover   x000D      animation-name  rotate   x000D      animation-duration  2s   x000D      animation-iteration-count  infinite  x000D      animation-timing-function  linear  x000D    x000D   x000D   keyframes rotate   x000D      from  transform  rotate 0deg    x000D      to  transform  rotate 360deg    x000D    x000D   lt div class  elem  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You should trigger the animation to revert once it s completed w  javascript         item   live  animationend webkitAnimationEnd   function          this  removeClass  animate

User · Answer

Cross browser compatible JS solution    x000D   x000D  var e   document getElementById  elem    x000D  var spin   false  x000D   x000D  var spinner   function    x000D  e classList toggle  running   spin   x000D  if  spin  setTimeout spinner  2000   x000D    x000D   x000D  e onmouseover   function    x000D  spin   true  x000D  spinner    x000D     x000D   x000D  e onmouseout   function    x000D  spin   false  x000D     x000D  body    x000D  height 300px   x000D    x000D   elem   x000D  position absolute  x000D  top 20   x000D  left 20   x000D  width 0   x000D  height 0  x000D  border-style  solid  x000D  border-width  75px  x000D  border-color  red blue green orange  x000D  border-radius  75px  x000D    x000D   x000D   elem running   x000D  animation  spin 2s linear 0s infinite  x000D    x000D   x000D   keyframes spin    x000D  100    transform  rotate 360deg      x000D    x000D   lt div id  elem  gt  lt  div gt  x000D   x000D   x000D

[css] Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Examples related to css

Examples related to css-animations