CSS3 `@keyframes` Rule

Example

Make a div element move gradually by 200 pixels:

Property
@keyframes	43.0 <br>4.0 -webkit-	10.0	16.0 <br>5.0 -moz-	9.0 <br>4.0 -webkit-	30.0 <br>15.0 -webkit- <br>12.0 -o-

The @keyframes rule allows you to create animations.

Animations are created by gradually changing from one set of CSS styles to another.

You can change as many CSS styles as you want, as many times as you want.

Specify when the change will happen in percent, or with the keywords "from" and "to", which are the same as 0% to 100%.

Note: Use the animation property to control the appearance of the animation, and also bind the animation to the selector.

Value	Description
animationname	Required. Defines the name of the animation.
keyframes-selector	Required. The percentage of the animation duration. Legal values: 0-100%<br> from (same as 0%)<br> to (same as 100%) Note: You can use one or more keyframe selectors.
css-styles	Required. One or more valid CSS style properties

Add an animation to many keyframe selectors:

Change many CSS styles in one animation:

Many keyframe selectors with many CSS styles: