Chrome не работает, любая идея?

Question

Я хочу создать вращающееся изображение, используя CSS3, но я не знаю, почему он не работает в Chrome. Я тестировал с Firefox и IE, работая, но не Chrome. Я только начал узнавать о @keyframe в CSS3.
Какая ошибка в моем коде?

@-webkit-keyframes spin { 
from { transform: rotate(0deg); } 
to { transform: rotate(360deg); } 
} 
@-moz-keyframes spin { 
from { transform: rotate(0deg); } 
to { transform: rotate(360deg); } 
} 
@-o-keyframes spin { 
from { transform: rotate(0deg); } 
to { transform: rotate(360deg); } 
} 
@keyframes spin { 
from { transform: rotate(0deg); } 
to { transform: rotate(360deg); } 
} 
.playing { 
-webkit-animation-name: spin; 
-webkit-animation-duration: 1500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
-moz-animation-name: spin; 
-moz-animation-duration: 1500ms; 
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 
-o-animation-name: spin; 
-o-animation-duration: 1500ms; 
-o-animation-iteration-count: infinite; 
-o-animation-timing-function: linear; 
animation-name: spin; 
animation-duration: 1500ms; 
animation-iteration-count: infinite; 
animation-timing-function: linear; 
} 
.playing:hover { 
-webkit-animation-play-state: paused; 
-moz-animation-play-state: paused; 
-o-animation-play-state: paused; 
animation-play-state: paused; 
} 

Answer 1

Вы должны использовать:

`-webkit-transform` 

(вместо transform)

См, также, это short demo.