Setting up CSS3/HTML5 rotate animation keyframes?

[java_man]

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.

[Mooseman]

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

[java_man]

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..)

[Mooseman]

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.

Hope this helps!

[java_man]

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