CSS Animation

CSS Animation property is used to create animation on the webpage. It can be used as a replacement of animation created by Flash and JavaScript.

Animation Property

Property Description
@keyframes It is used to specify the animation.
animation This is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
animation-delay It specifies when the animation will start.
animation-direction It specifies if or not the animation should play in reserve on alternate cycle.
animation-duration It specifies the time duration taken by the animation to complete one cycle.
animation-fill-mode it specifies the static style of the element. (when the animation is not playing)
animation-iteration-count It specifies the number of times the animation should be played.
animation-play-state It specifies if the animation is running or paused.
animation-name It specifies the name of @keyframes animation.
animation-timing-function It specifies the speed curve of the animation.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
For example: In the first example code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown.


How CSS animation works

When the animation is created in the @keyframe rule, it must be bound with selector; otherwise the animation will have no effect.
The animation could be bound to the selector by specifying at least these two properties:


CSS animation example: changing background color

<html>
<head>
<title>CSS</title>
<style>
.a1
{
width: 100px;
height: 100px;
background: red;
animation: myfirst 5s;
}
@keyframes myfirst
{
width: 100px;
from {background: red;}
to {background: green;}
}
</style>
</head>
<body>
<div class="a1">
</div>
<p> When an animation is finished, it goes back to its original style.</p>
</body>
</html>

OUTPUT


CSS

When an animation is finished, it goes back to its original style.


CSS animation example: changing background color

<html>
<head>
<title>CSS</title>
<style>
.a2
{
width: 100px;
height: 100px;
background: red;
animation-name: example;
position: relative;
animation-duration: 4s;
}
@keyframes example
{
0% background-color:red; left:0px; top:0px;
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1> <div class="a2">
</div>
<p> When an animation is finished, it goes back to its original style.</p>
</body>
</html>

OUTPUT

CSS

CSS Animation

When an animation is finished, it goes back to its original style.