CSS animation property is used to apply animation(s) on an element. The animation property is used in conjunction with the @keyframe rule to apply visual effects to the element.
This animation property is basically a shorthand of the following animation properties:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Example:
.div1{
animation: moveRight 4s infinite;
}
.div2{
animation: moveRight 4s infinite 2s;
}
Note: If we omit any property, its default value is used in the animation property.
CSS Syntax
The animation property has the below syntax:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animaiton-direction animation-fill-mode animation-play-state|initial|inherit;
Property Values
The animation property accepts the following values:
| animation-name | Specifies the name of the @keyframe at-rule which is to be applied to the selected element. |
| animation-duration | Specifies the time in seconds(s) or milliseconds(ms) that the animation will take to complete |
| animation-timing-function | Specifies how the animation will grow. It basically defines the speed curve of the entire animation. |
| animation-delay | Specifies the time delay in seconds(s) or milliseconds(ms) which the animation will take before starting. |
| animation-iteration-count | Specifies how many times the animation should be played. |
| animation-direction | Specifies the direction in which the animation will play. |
| animation-fill-mode | This property allows us to define a style for the element when the animation is not running. |
| animation-play-state | Specifies whether the animation is running or paused. |
| initial | Sets the animation property to its default value. |
| inherit | Inherits the animation property from the parent element. |
General Info
| Default Value | none 0 ease 0 1 normal none running |
| Inherited | No |
| JavaScript Usage | element.style.animation = “moveRight 4s infinite”; |
