How to reverse an animation on mouse out after hover

by

I think that if you have a to, you must use a from.
I would think of something like :

@keyframe in {
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframe out {
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

Of course must have checked it already, but I found strange that you only use the transform property since CSS3 is not fully implemented everywhere. Maybe it would work better with the following considerations :

  • Chrome uses @-webkit-keyframes, no particuliar version needed
  • Safari uses @-webkit-keyframes since version 5+
  • Firefox uses @keyframes since version 16 (v5-15 used @-moz-keyframes)
  • Opera uses @-webkit-keyframes version 15-22 (only v12 used @-o-keyframes)
  • Internet Explorer uses @keyframes since version 10+

EDIT :

I came up with that fiddle :

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

Using minimal code. Is it approaching what you were expecting ?

More Related Contents:

  1. SVG animation is not working on IE11
  2. How to animate handwriting text on the web page using SVG?
  3. How can I transition width of content with width: auto?
  4. CSS Auto hide elements after 5 seconds
  5. How to have css3 animation to loop forever
  6. CSS endless rotation animation
  7. Simple CSS Animation Loop – Fading In & Out “Loading” Text
  8. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  9. CSS transition auto height not working [duplicate]
  10. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  11. Reuse CSS animation in reversed direction (by resetting the state?)
  12. Animate CSS background-position with smooth results (sub-pixel animation)
  13. What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS
  14. What are -moz- and -webkit-? [duplicate]
  15. How to add spacing between columns?
  16. “text-align: justify;” inline-block elements properly?
  17. How to rotate the background image in the container?
  18. CSS Animations with delay for each child element
  19. how to avoid extra blank page at end while printing?
  20. CSS ONLY Animate Draw Circle with border-radius and transparent background
  21. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  22. Fallback fonts on special characters
  23. Apple-like scrollbars using CSS
  24. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  25. Div side by side without float
  26. Pure CSS animation visibility with delay
  27. CSS specificity or inheritance?
  28. Why box-sizing is not working with width/height attribute on canvas element?
  29. Center fixed div with dynamic width (CSS)
  30. How to use images in css with Webpack

Leave a Comment