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


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!

Problem courtesy of: Gavin


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 :

It works fine with Firefox but not with Chrome

    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>

Solution courtesy of: Yoann


var deg = 0

function rotate(id)
    deg = deg+45;
    var txt = 'rotate('+deg+'deg)';

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.

Discussion courtesy of: omar-ali

You should trigger the animation to revert once it's completed w/ javascript.

  $(".item").live("animationend webkitAnimationEnd", function(){
Discussion courtesy of: chovy

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;
Discussion courtesy of: luizfelippe

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:

Check out this article for more information, including how to add cross-browser compatibility:

Discussion courtesy of: triq6

Here's a javascript implementation that works with web-kit:

var isHovering = false;

var el = $(".elem").mouseover(function(){
    isHovering = true;
    isHovering = false;

var spin = function(){


            setTimeout(spin, 1500);
        }, 0);



Discussion courtesy of: bendytree

This recipe can be found in it's original form on Stack Over Flow.