Chrome not working, any idea?

Question

I want to create a spinning image using CSS3, but I don't know why it doesn't work on Chrome. I tested with Firefox and IE, both working but not Chrome. I just started learn about @keyframe in CSS3.
What is the mistake in my code?

@-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

You should use:

`-webkit-transform` 

(instead of transform)

See, also, this short demo.