Setting up CSS3/HTML5 rotate animation keyframes?

Hi, I have a spinner on my site, and at the moment its rotating in one direction, back and forth 60 degrees.. which is good, and it looks smooth, but I want it to go --

start at -60deg - to 120deg - back to -60deg

and I'm not sure how to add in another keyframe. Here's my code.

#spinner {
position: absolute;
top: -3px;
left: 168px;
margin: 0px 0 0 0px;
height: 72px;
width: 72px;
text-indent: 250px;
white-space: nowrap;
overflow: hidden;
-webkit-mask-image: url(logo.png);
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes spinnerRotate {
from {
-webkit-transform: rotateY(-60deg);
}
to {
-webkit-transform: rotateY(60deg);
}
}

Thanks everyone.

What browser are you using? I believe only nightly Webkit builds support some of your code.

On the upside, it works in my plain old Safari 4, but on the downside, yeah, I need help adding in support for IE9/10 (8?) and Firefox..

Additionally, can I do keyframes containing multiple motion tweens? example, zoom, flip, rotate, scale, etc.



(edit - For example, I'm working on one object that -

1. Fades opacity from 0.5 to 1.

2. Zooms

3. Rotates up and down about 30 degrees.

It's not there just yet, I will post the code for this one momentarily..)

Any CSS with -webkit- or -moz- etc. will only work in the one browser. -webkit- is Safari, so you're okay there. I don't know if this can help you: http://addyosmani.com/blog/css3transitions-jquery/. I haven't used it, but the demo works in IE8.

About IE9. It works...in theory. It does not support transitions. We can only hope for IE10. :p

Hope this helps! :thumbsup:

Fair enough.. That clears things up a bit. Thanks!