CSS3 Animation


CSS3 animation

CSS3 can create animations that can replace many of the effects achieved by web animation images, Flash animations, and JavaScript.


CSS3 @keyframes rules

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

The @keyframes rule is to create animations.

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


Browser support

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

The number immediately preceding -webkit-, -ms- or -moz- is the version number of the first browser that supports the prefixed attribute.

Property1644239972933036500.png1644239976255071298.png1644239979296037452.png1644239982362064444.png1644239985216062456.png
@keyframes43.0
4.0 -webkit-
10.016.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation43.0
4.0 -webkit-
10.016.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

OperaSafariChromeFirefoxInternet Explorer

Example

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

CSS3 animation

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

Specify at least two of these CSS3 animation properties to bind to a selector:

  • Specifies the name of the animation

  • Specifies the duration of the animation

OperaSafariChromeFirefoxInternet Explorer

Example

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

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

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?

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

You can change any number of styles as many times as you like.

Please specify when the change occurs as a percentage, 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.

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

OperaSafariChromeFirefoxInternet Explorer

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 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

Try It! 


OperaSafariChromeFirefoxInternet Explorer

Example

Change 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 与 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! 


CSS3 animation properties

The following table lists @keyframes rules and all animation properties:

PropertyDescriptionCSS
@keyframesSpecifies animation.3
animationShorthand property for all animation properties.3
animation-nameSpecifies the name of the @keyframes animation.3
animation-durationSpecifies the seconds or milliseconds it takes for the animation to complete a cycle. Default is 0.3
animation-timing-functionSpecifies the speed curve for the animation. The default is "ease".3
animation-fill-modeSpecifies the style to apply to the element when the animation is not playing (when the animation finishes, or when the animation has a delay before it starts playing).3
animation-delaySpecifies when the animation should start. Default is 0.3
animation-iteration-countSpecifies the number of times the animation is played. Default is 1.3
animation-directionSpecifies whether the animation is played in reverse on the next cycle. Default is "normal".3
animation-play-stateSpecifies whether the animation is running or paused. Default is "running".3

The following two examples set all animation properties:

OperaSafariChromeFirefoxInternet Explorer

Example

Run the myfirst animation, setting all 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 与 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! 

OperaSafariChromeFirefoxInternet Explorer

Example

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

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

Try It!