CSS3 animations

CSS3 animations

CSS3, we can create animations which can replace many pages animated images, Flash animations, and JAVAScripts.

CSS3 @keyframes rules

To create CSS3 animations, you will have to learn @keyframes rules.

@keyframes rule is to create animation. Specify a CSS style and animation will gradually change to the new style from the current style within @keyframes rules.

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

Examples

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

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

CSS3 animations

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

Specify at least two CSS3 animation property is bound to a selector:

• It specifies the name of the animation
• When a predetermined length animation

Examples

The "myfirst" animation tied to div element Duration: 5 seconds:

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

try it"

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

What CSS3 animations are?

Animation element is to make a gradual change from one style to another style effect.

You can change as many styles as many times.

Please use the percentage change in the prescribed time, or keyword "from" and "to", equivalent to 0% and 100%.

0% is the beginning of the animation, the animation is 100% complete.

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

Examples

Change the background color when the animation is 25% and 50%, and 100% complete when the animation changed again:

@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"

Examples

Change the background color and location:

@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"

CSS3 animation properties

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

The following two examples set all animation properties:

Examples

Run myfirst animation, 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;
}

try it"

Examples

The animation above the same, but with a short animated animation properties:

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

try it"