CSS Animation

To create an animation on a webpage, we can either use CSS animation, Flash, or JavaScript, each having its own benefits and limitations.

CSS3 @keyframes Rule:

To control the intermediate steps in a CSS animation sequence, it is created in the @keyframe rule.

Effect of animation:

To create an element that can change gradually from one style to another, animation is required. There is no limit on the animation properties to add. When the changes are defined in percentage, 0% represents the beginning of the animation and 100% represents the end of the animation.

Working on the CSS animation:

For the animation created in the @keyframe rule, the animation will not work till it is bound with the selector. One can achieve this by specifying at least the below properties:

  • Name of the animation
  • Duration of the animation

CSS Animation Properties:

Property Uses
@keyframes To specify the animation.
animation To set each property, other than the animation-play-state and the animation-fill- mode property.
animation-delay To determine when the animation will start.
animation-direction To determine whether or not the animation should play in reserve on an alternate cycle.
animation-duration To indicate the time duration taken by the animation to complete one cycle.
animation-fill-mode To define the static style of the element when the animation does not play.
animation-iteration-count To define the number of times the animation will play.
animation-play-state To determine whether the animation is running or paused.
animation-name To define the name of @keyframes animation.
animation-timing-function To define the speed curve of the animation.

Example: Changing background color:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: crimson;
-webkit-animation-name: changing;
-webkit-animation-duration: 10s;
animation-name: changing;
animation-duration: 10s;
}
@-webkit-keyframes changing {
from {background-color: crimson;}
to {background-color: purple;}
}
@keyframes changing {
from {background-color: crimson;}
to {background-color: purple;}
}
</style>
</head>
<body>
<h2>I change my color.</h2>
<div></div>
</body>
</html>

Explanation:

In the above example, the background color of the rectangle changes from crimson to purple.

Example: Moving Rectangle:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 100px;
background: crimson;
position: relative;
-webkit-animation: moving 10s;
animation: moving 10s;
}
@-webkit-keyframes moving {
0% {background:crimson; left:0px; top:0px;}
25% {background:yellow; left:400px; top:0px;}
50% {background:blue; left:300px; top:400px;}
75% {background:green; left:0px; top:300px;}
100% {background:crimson; left:0px; top:0px;}
}
@keyframes moving {
0% {background:crimson; left:0px; top:0px;}
25% {background:yellow; left:400px; top:0px;}
50% {background:blue; left:400px; top:300px;}
75% {background:green; left:0px; top:300px;}
100% {background:crimson; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Explanation:

In the above example, we are displaying animation with a percentage value. Here, the rectangle is moving from one position to another and is also changing color while moving.