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.