Question

I want to create a non-stop spinning square using html and css. I currently have:

@-webkit-keyframes spinnow {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinnow {
    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes spinnow {
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}

What I have currently got will make the square spin, but it will always stop after one full rotation, then start shortly afterwards. How do I make it continuously spin without stopping?

N.B. I’m using @-webkit-keyframes, @-moz-keyframes and @-ms-keyframes.

Thanks very much,

Lucas

Answer 1

It has nothing to do with the definition of the animation, but with its usage:

.foo {
    animation: 5s spinnow infinite linear;
}

The infinite keyword is what you need. You can also put an integer there, to have a finite number of rotation cycles.

Edit by OP: For future visitors, the linear keyword is to make the animation not speed up and then slow down using the swing animation, but rather use a linear, smooth approach, so that the speed is distributed and does not make the square appear to stop. This keyword was the important one for me – I had the infinite keyword already.

http://jsfiddle.net/GXPS8/