CSS3 animation

CSS3 animation

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

CSS3 animation

CSS3 @keyframes rules

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

The @keyframes rule is to create an animation.

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

Browser support

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

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

Example

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

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

CSS3 animation

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

Specify that the animation properties of at least two CSS3 are bound to one selector:

• Specify the name of the animation

• Specify the duration of the animation

Example

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

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

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

What is CSS3 animation?

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

You can change as many styles as you want and 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 beginning of the animation and 100% is the completion of the animation.

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

Example

Change the background color when the animation is 25% and 50%, and 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;}
}

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

Animation properties of CSS3

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

The following two examples set all animation properties:

Example

Running myfirst animate, set all the attributes:

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

Same as the above animation, but using an abbreviated animation animation attributes:

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