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!

Answer 1

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>