CSS3 Animations(Fg. 1)

   With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in existing web pages.

To create animations in CSS3, you will have to learn about the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

   Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.

Chrome and Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

Fg. 1 (CSS3 Animations)

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

Fg. 2.1 (CSS3 Animations)

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

Fg. 2.2 (CSS3 Animations)

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

CSS3 Animation(Fg.s 2)

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect. Bind the animation to a selector by specifying at least these two CSS3 animation properties:( See Fg. 2.1)

  • Specify the name of the animation
  • Specify the duration of the animation

Syntax

animation: name duration timing-function delay iteration-count direction;

The animation property is a shorthand property for six of the animation properties:( See Fg. 2.2)

animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction.

Always specify the animation-duration property, otherwise the duration is 0, and will never be played.

CSS3 @keyframes Rule(Fg.s 3)

With the @keyframes rule, you can create animations.
The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

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

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

Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.

Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Examples (Fg. 3.1 & Fg. 3.2)

Fg. 3.1 (CSS3 @keyframes Rule )

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

Fg. 3.2 (CSS3 @keyframes Rule )

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