Animation Property in CSS
Animation Properties
As we know, animation lets an element gradually change from one state to another, and also animation property is a short-hand property.
The list of Animation Properties are:-
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Syntax:-
Its syntax is:-
< style >
element{
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
< /style >
Further Explanation:-
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |