CSS rotates animation only in Webkit

Question

I want the element to rotate 360 ​​degrees indefinitely. Here is my code:

.rotate-animation { -webkit-animation: rotate 2s linear 0 infinite normal; -moz-animation: rotate 2s linear 0 infinite normal; -o-animation: rotate 2s linear 0 infinite normal; -ms-animation: rotate 2s linear 0 infinite normal; animation: rotate 2s linear 0 infinite normal; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-o-keyframes rotate { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 

It works only in Webkit browsers. What am I doing wrong?

Answer 1

You must also specify seconds with zero 0s . eg:

 -moz-animation: rotate 2s linear 0s infinite normal; 

Instead of this

 -moz-animation: rotate 2s linear 0 infinite normal; 

Check out http://jsfiddle.net/srxzF/2/

Answer 2

For greater security, the best choice is to record seconds with s in all cases.

 rotate 2s linear 0s infinite normal;