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

by

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

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

More Related Contents:

  1. Animate text for landing page
  2. Use CSS3 transitions with gradient backgrounds
  3. Maintaining the final state at end of a CSS3 animation
  4. Stopping a CSS3 Animation on last frame
  5. css3 transition animation on load?
  6. Changing Background Image with CSS3 Animations
  7. Play multiple CSS animations at the same time
  8. CSS3 animation not working in safari
  9. How to animate a radial-gradient using CSS?
  10. CSS animation delay in repeating
  11. How can I transition width of content with width: auto?
  12. Passing parameters to css animation
  13. Background-image in keyframe does not display in Firefox or Internet Explorer
  14. CSS3 Spin Animation
  15. Webkit CSS Animation issue – persisting the end state of the animation? [duplicate]
  16. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  17. Why can’t I animate custom properties (aka CSS variables)?
  18. CSS: Animation vs. Transition
  19. Animating max-height with CSS transitions
  20. Changing :hover to touch/click for mobile devices
  21. How to prevent a CSS keyframe animation from running on page load?
  22. Maintaining the final state at end of a CSS animation
  23. How to add animated gradient to an svg path?
  24. Filling water animation
  25. Reuse CSS animation in reversed direction (by resetting the state?)
  26. Pure CSS animation visibility with delay
  27. CSS Animation property stays after animating
  28. Looping Animation of text color change using CSS3
  29. How can I delay the start of a CSS animation?
  30. Disable CSS animation on pseudo element inherited from parent

Leave a Comment