CSS animation Property
CSS Animations is a method for altering the appearance and behavior of different components in web pages. It is used to manipulate the elements by altering their movements or displays. It is divided into two sections, one containing the CSS attributes that define the animation of the elements and the other including keyframes that identify the animation characteristics of the element and the particular time intervals at which they must occur.
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Syntax
Property Values
| Value | Description |
|---|---|
| animation-name | Specifies the name of the keyframe to which the selection should be bound. |
| animation-duration | Specifies how many seconds or milliseconds it takes for an animation to complete. |
| animation-timing-function | Specifies the animation's speed curve. |
| animation-delay | Specifies the amount of time before the animation begins. |
| animation-iteration-count | The number of times an animation should be played. |
| animation-direction | Specifies whether the animation should be played backwards on alternate cycles. |
| animation-fill-mode | Specifies which values are used by the animation while it is not running. |
| animation-play-state | Determines whether the animation is active or halted. |
| initial | This attribute is set to its default value. Learn more about the beginning. |
| inherit | This attribute is inherited from its parent element. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| animation |
43.0
4.0 -webkit- |
16.0
5.0 -moz- |
9.0
4.0 -webkit- |
10.0 |
30.0
15.0 -webkit- 12.0 -o- |