CSS3 Animation

CSS3 Animation

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

CSS3 @keyframes Rule

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

The @keyframes rule is used to create animations.

Within 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 numbers following -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.

Example

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

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

CSS3 Animation

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

Specify at least these two CSS3 animation properties for a selector:

• Define the animation name

• Define the animation duration

Example

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

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

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

What is CSS3 Animation?

Animation is a gradual change 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 of change, 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 completion of the animation.

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

Example

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

@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;}
}

Example

Change 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;}

CSS3 Animation Properties

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

The following two examples set all animation properties:

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 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;
}

Example

The same animation as 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;
}

-webkit-animation: myfirst 5s linear 2s infinite alternate;
}