CSS Animations
CSS Animations is a way to change the appearance of an element from one style to another. It contains two parts. One part contains the properties which describes the animation of the elements and another part contains certain keyframes which refers to the animation properties of the element.
The @keyframe rule: It defines the display of the animation. When an user define the CSS style inside the @keyframes the animation will change gradually from current style to a new style certain times.
Example:
from { background-color: green; }
to { background-color: red; }
}
div {
width: 200px;
height: 200px;
background-color: green;
animation-name: change_color;
animation-duration: 4s;
}
Run Example
You can also use percentage. By using percent, you can add as many style as you like.
Example:
0% { background-color: green; }
25% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: blue; }
}
div {
width: 200px;
height: 200px;
background-color: green;
animation-name: change_color;
animation-duration: 4s;
}
Run Example
Some properties of animation:
- animation-name : It specifies the name of the @keyframes at-rule describing the animation’s keyframes.
- animation-duration : It defines the length of time that an animation should take to complete one cycle.
- animation-timing-function : It defines the speed curve of the animation. It can have the following values:
- ease - It is the default style. Specifies an animation to start slowly, then fast, then end slowly.
- linear - It specifies an animation with the same speed from start to end.
- ease-in - It specifies an animation with a slow start.
- ease-out - It specifies an animation with a slow end.
- ease-in-out - It specifies an animation with a slow start and end.
- animation-delay : It specifies the delay when animation start.
- animation-iteration-count : It specifies the number of times the animation will repeat.
- animation-direction : It defines whether an animation should be played forwards, backwards or in alternate cycles. It can have the following values:
- normal - It is the default style. The animation is played in the forward direction.
- reverse - The animation is played in the backward direction.
- alternate - The animation is played first in the forward direction, then in the backward.
- alternate-reverse - The animation is played first in the backward direction, then in the forward direction.
- animation-fill-mode : It specifies what values are applied by the animation before and after it is executing.
Here is an example with animation-delay property. The following example has a 5 seconds delay before starting the animation:
Example:
0% { background-color: green; }
25% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: blue; }
}
div {
width: 200px;
height: 200px;
background-color: green;
animation-name: change_color;
animation-duration: 4s;
animation-delay: 5s;
}
Run Example
Here is an example with animation-iteration-count property. The following example will run the animation 3 times before it stops:
Example:
0% { background-color: green; }
25% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: blue; }
}
div {
width: 200px;
height: 200px;
background-color: green;
animation-name: change_color;
animation-duration: 4s;
animation-iteration-count: 3;
}
Run Example
Here is an example with animation-timing-function property. The following example display some of the different speed curves that can be used:
Example:
animation-timing-function: linear;
}
#div2 {
animation-timing-function: ease;
}
#div3 {
animation-timing-function: ease-in;
}
#div4 {
animation-timing-function: ease-out;
}
#div5 {
animation-timing-function: ease-in-out;
}
Run Example
Browser Support
| Attribute | Firefox | Chrome | IE | Opera | Safari |
|---|---|---|---|---|---|
| animation | 16.0 | 43.0 | 10.0 | 30.0 | 9.0 |