CSS enables you to apply animated effects to the HTML elements without using any JavaScript or Flash. Basically, the element will change from one state to other gradually giving an effect of aliveness.
There are 3 main components to provide the desired animation effect on an element:
@keyframes: This rule defines the desired animation effect like change in color or change in position etc. Every @keyframes rule is given a name which is later used to use the animation effect for any element. A typical example for @keyframes rule:
1 2 3 4 | @keyframes animate01 { from { background-color: pink;} to {background-color: orange;} } |
Here, we have defined an animation rule that will change the background color of an element from pink to orange. Instead of from and to you can also use the completion percentage from 0% to 100%. In fact, you can set changes for different percentage values to enhance the animation effect.
animation-name: This CSS property specifies name of the @keyframe rule that is to be applied for the element. For example, to apply above animation rule, we’ll use the name “animate01”.
animation-duration: The time for which the animation would take place. If no value is given then the value by default 0 and no animation is visible.
animation-delay
The animation-delay property can be used to add a delay before the animation starts. A positive value to this property specifies the obvious delay while a negative value starts the animation as if it was running for the said time.
For instance, if the animation-duration is 4s and you set an animation-delay of -1s the animation will start as if it is been running for past 1s (~25% complete already).
animation-iteration
It specifies the count of times the animation should run.
animation-direction
Whether the element should play forwards, backwards or in alternate cycles, can be set using this property. The permissible values are:
normal – forward direction
reverse – backward direction
alternate – forwards first, then backwards
alternate-reverse – backwards first, then forwards
animation-timing-function
Used to specify the speed curve of the animation
Specify the fill-mode For an Animation
animation-fill-mode
This can be used to style the element before the animation start and/or after it ends.