How can I implement a swinging animation using CSS in WebKit?

Hey

I am looking for a way to get my image to rotate ~50 degrees, pause for a short time (> a second), rotate the other way to ~-50deg, and then go back to开发者_运维知识库 origin. And repeat.

I am having trouble with telling it to rotate back. Any help would be very nice.

Ahuge

Animation in webkit can be pretty simple. You first declare the animation effect using the @-webkit-keyframes rule:

@-webkit-keyframes swing {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

Webkit uses an animation technique called keyframes. If you're familiar with Flash or 3D animation, you'll know what it is. Basically you set certain positions for your element in a series of "keyframes" and depending on the settings you declare with another set of rules, it will smoothly "animate" the element between the keyframes you have set.

Ok so once we have defined an animation, we apply it using -webkit-animation-name and related properties.

div {
 -webkit-animation-name: swing;
 -webkit-animation-duration: 6s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

This attaches the bounce animation, tells it to "play" for 6 seconds ten times and makes every other animation play in reverse.

Keyframes are specified using percentage values, the "from" is equivalent to 0% and "to" is the same as 100%.

This only works in Webkit nightly builds so far as I'm aware, so the vast majority of your users aren't going to see this.

Here is an example for you although it won't animate unless you're using a nightly build.

I'd suggest using a jQuery solution if you want more of your userbase to see this animation.