CSS3 Animation

CSS3 can create animations, which can replace many web animation images, Flash animations, and JavaScript effects.

---

CSS3 @keyframes Rule

To create a CSS3 animation, you need to understand the @keyframes rule.

The @keyframes rule is used to create an animation.

The @keyframes rule specifies a CSS style and the animation will gradually change from the current style to the new style.

---

Browser Support

The numbers in the table indicate the first browser version that supports the property.

The numbers before -webkit-, -ms- or -moz- indicate the first browser version that supports the prefix property.

@keyframes	43.0 4.0-webkit-	10.0	16.0 5.0-moz-	9.0 4.0-webkit-	30.0 15.0-webkit- 12.0 -o-
animation	43.0 4.0-webkit-	10.0	16.0 5.0-moz-	9.0 4.0-webkit-	30.0 15.0-webkit- 12.0-o-

Example

@keyframes myfirst{from{background:red;}to{background:yellow;}} @-webkit-keyframes myfirst{from{background:red;}to{background:yellow;}}

---

CSS3 Animation

When creating an animation in **@keyframes**, bind it to a selector, otherwise the animation will have no effect.

You must specify at least these two CSS3 animation properties bound to a selector:

• Specify the name of the animation
• Specify the duration of the animation

Example

div{animation:myfirst 5 s; -webkit-animation:myfirst 5 s; }

Try it »

Note: You must define the name of the animation and the duration of the animation. If the duration is omitted, the animation will not run because the default value is 0.

---

What is CSS3 Animation?

An animation is the effect where an element gradually changes from one style to another.

You can change any number of styles any number of times.

Use percentages to specify when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the start of the animation, and 100% is the end of the animation.

To get the best browser support, you should always define 0% and 100% selectors.

Example

@keyframes myfirst{ 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;}} @-webkit-keyframes myfirst{ 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;}}

Try it »

Example

@keyframes myfirst{ 0% {background:red; left:0 px; top:0 px;} 25% {background:yellow; left:200 px; top:0 px;} 50% {background:blue; left:200 px; top:200 px;} 75% {background:green; left:0 px; top:200 px;} 100% {background:red; left:0 px; top:0 px;}} @-webkit-keyframes myfirst{ 0% {background:red; left:0 px; top:0 px;} 25% {background:yellow; left:200 px; top:0 px;} 50% {background:blue; left:200 px; top:200 px;} 75% {background:green; left:0 px; top:200 px;} 100% {background:red; left:0 px; top:0 px;}}

Try it »

---

CSS3 Animation Properties

The following table lists the @keyframes rule and all animation properties:

Property	Description	CSS
[@keyframes]( "CSS3 @keyframes Rule")	Specifies the animation.	3
( "CSS3 animation Property")	The shorthand property for all animation properties.	3
( "CSS3 animation-name Property")	Specifies the name of the @keyframes animation.	3
( "CSS3 animation-duration Property")	Specifies the time in seconds or milliseconds that the animation takes to complete one cycle. The default is 0.	3
( "CSS3 animation-timing-function Property")	Specifies the speed curve of the animation. The default is "ease".	3
( "CSS3 animation-fill-mode Property")	Specifies the style applied to the element when the animation is not playing (when the animation is completed or when there is a delay before the animation starts).	3
( "CSS3 animation-delay Property")	Specifies when the animation starts. The default is 0.	3
( "CSS3 animation-iteration-count Property")	Specifies the number of times the animation is played. The default is 1.	3
( "CSS3 animation-direction Property")	Specifies whether the animation plays in reverse in the next cycle. The default is "normal".	3
( "CSS3 animation-play-state Property")	Specifies whether the animation is running or paused. The default is "running".	3

The following two examples set all animation properties:

Example

div{animation-name:myfirst; animation-duration:5 s; animation-timing-function:linear; animation-delay:2 s; animation-iteration-count:infinite; animation-direction:alternate; animation