CSS3 webkit animation 2d issue

Problem

I am using following css3 code for a 2d 360 degrees animation. It works for all browsers (except of course ie version < 10) but i cannot make it work for webkit. As you can see here the live example http://www.franksdonuts.gr/mainpage/ webkit (chrome, safari) fails. My code is the following :

@keyframes spinner {
 0% {
 -webkit-transform:rotate(0deg);
 -moz-transform:rotate(0deg);
 -ms-transform:rotate(0deg);
 -o-transform:rotate(0deg);
 transform:rotate(0deg);
}
 100% {
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 transform:rotate(360deg);
}
}
.spinner {
-webkit-animation: spinner 10s infinite linear;
-moz-animation: spinner 10s infinite linear;
-ms-animation: spinner 10s infinite linear;
-o-animation: spinner 10s infinite linear;
animation: spinner 10s infinite linear;
}

Is there a better solution to achieve this 2d rotation with ie9 too?

Problem courtesy of: Marios Fakiolas

Solution

You should use proprietary keyframes tag.

@-moz-keyframes
@-webkit-keyframes
@-o-keyframes
Solution courtesy of: Fez Vrasta

Discussion

Have you look into Greensock JS? It's pretty amazing and so convenient.

http://www.greensock.com/get-started-js/

Enjoy!

Discussion courtesy of: mika

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