Q:

Rotate element with CSS3 on demand

I defined this keyframe:
@-moz-keyframes rotate{
    0%{
        -moz-transform: rotate(0deg);   
    }
    100%{
        -moz-transform: rotate(359deg);
    }
}

And applied to a classname:
.rotate{
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -moz-animation-name: rotate;
}

And Add the class to the element on demand:
$('a').click(function(){ $(this).addClass('rotate'); });   /* and the class is applied */

But the item won't rotate; What am I doing wrong?
Please note: I am only testing in firefox, that's why I'm only using the -moz- vendor prefix

A:

Add a duration:
.rotate{
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1s;
}

The duration defines how long each rotation takes. If you don't set one, the default is zero.

