CSS animations

Animations change the CSS properties of an element during the sub-intervals of time. CSS properties can be overriden by the new properties in the next upcoming sub-intervals.

It is a shorthand property of animation-name, animation-time, animation-duration, animation-direction, animation-iteration-count, animation-delay.

animation-name property

animation-name defines the name of the animation. The value of animation-name is the name that comes after @keyframes keyword. See the example below.

<style>
div{
 background-color:red;
 animation-name:changeBG;
}
@keyframes changeBG{
from{
 background-color:red;
}
to{
 background-color:green;
}	
}
</style>

The color of the background-color changes from red to green.

from and to keywords can be replaced by 0% and 100% respectively.

keyframe rule (@keyframes)

keyframe rule consists of @keyframes keyword followed by the animation-name and percentage values of time. The percentage values represent the intervals of time. The time is obtained by the value of animation-duration.

<style>
div{
 background-color:red;
 animation-name:changeBG;
 animation-duration:2s;
}
@keyframes changeBG{
0%{
 background-color:red;
}
50%{
 background-color:green;
}
100%{
 background-color:blue;
}	
}
</style>
Try </>

animation-duration defines the time during which this animation will occur.

0% means 0s.
50% means 50% of animation-duration i.e. 2s.
100% means 100% of animation-duration i.e. 4s.

animation-duration property

animation-duration represents the time during which animation property is executed.

See the example given above.

animation-iteration-count property

This property defines how many times the animation propery should be repeated.

<style>
div{
 position:relative;
 animation-name:changeBG;
 animation-iteration-count:5;
}
@keyframes changeBG{
0%{
 left:0%;
}
100%{
 left:100%;
}	
}
</style>
Try </>

The value of animation-iteration-cout is 10. It means the animation propery repeats itself 10 times.

animation-direction

animation-direction specifies the direction of animation. The direction of animation cycles may be normal, reverse, alternate or alternate-reverse.

<style>
div{
 position:relative;
 animation-name:changeBG;
 animation-direction:reverse;
}
@keyframes changeBG{
0%{
 left:0%;
 top:0%
}
100%{
 left:80%;
 top:0%;
}	
}
</style>
Try </>

This time the direction of animation cycle is reversed.

animation-delay

This property delays the animation. It sets the offset time before starting the animation.

<style>
div{
 position:relative;
 animation-name:changeBG;
 animation-delay:2s;
}
@keyframes changeBG{
0%{
 left:0%;
 top:0%
}
100%{
 left:80%;
 top:0%
}
}
</style>
Try </>

The animation starts after two seconds.