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 preceding -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, you need to 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 with a duration of 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 an effect that makes an element gradually 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 the 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;} } -webkit-animation: myfirst 5s linear 2s infinite alternate; }