CSS3 Animation

CSS3 Animations

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

CSS3
Animation

CSS3 @keyframes rule

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

The @keyframes rule is for creating animations.

Inside the @keyframes rule, you specify 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 number preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.

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 /*Safari and Chrome*/ { from {background: red;} to {background: yellow;} }

CSS3 Animations

when at@keyframesCreate an animation and bind it to a selector; otherwise, the animation will have no effect.

Specify at least the following two CSS3 animation properties bound to a selector:

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

Example

Bind the "myfirst" animation to the div element, duration: 5 seconds:

div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /*Safari and Chrome*/ }

Try it Yourself »

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 are CSS3 animations?

An animation is the effect of gradually changing an element from one style to another.

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

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

0% is the beginning of the animation, and 100% is the completion of the animation.

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

Example

Change the background color when the animation is at 25% and 50%, then change it again when the animation is 100% complete:

@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myfirst /*Safari and Chrome*/ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }

Try it Yourself »

Example

Changing the background color and position:

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

Try it Yourself »

CSS3 animation properties

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

Property	Description	CSS
@keyframes	Specify animation.	3
animation	The shorthand property for all animation properties.	3
animation-name	Specifies the name of the @keyframes animation.	3
animation-duration	Specifies the seconds or milliseconds it takes for an animation to complete one cycle. Default is 0.	3
animation-timing-function	Specifies the speed curve of the animation. Default is "ease".	3
animation-fill-mode	Specifies the style to apply to an element when the animation is not playing (when the animation has completed, or when the animation has a delay and has not started playing).	3
animation-delay	Specifies when the animation starts. Default is 0.	3
animation-iteration-count	Specifies the number of times the animation is played. Default is 1.	3
animation-direction	Specifies whether the animation plays in reverse in the next cycle. Default is "normal".	3
animation-play-state	Specifies whether the animation is running or paused. Default is "running".	3

The following two examples set all animation properties:

Example

Run the myfirst animation, setting all the properties:

div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /*Safari and Chrome:*/ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; }

Try it Yourself »

Example

Same as the animation above, but using the shorthand animation property:

div { animation: myfirst 5s linear 2s infinite alternate; /*Safari and Chrome:*/ -webkit-animation: myfirst 5s linear 2s infinite alternate; }

Try it Yourself »

other extensions