Style animation Property
Style animation Property
The animation property is used for animating an element or component. It is a shorthand property for six animation properties. These are:-
- animationName
- animationDuration
- animationTimingFunction
- animationDelay
- animationIterationCount
- animationDirection
If animationDuration is not set, then its default value is 0. Thus, the animation will never play.
Syntax:-
Its syntax is:- object.style.animation OR object.style.animation = name duration timingFunction delay iterationCount direction fillMode playState
Return:-
Its return is:- string having animation property of an element
Further Explanation:-
Value | Description |
---|---|
animationName | Specifies name of keyframe we want to bind to the selector |
animationDuration | Specifies how many milliseconds or seconds an animation takes to complete |
animationTimingFunction | Specifies speed curve of animation |
animationDelay | Specifies delay before animation will start |
animationIterationCount | Specifies how many times animation should be played |
animationDirection | Specifies whether or not animation should play in reverse on alternate cycles |
animationFillMode | Specifies what values are applied by animation outside the time it is executing |
animationPlayState | Specifies whether the animation is running or paused |
initial | Sets property to its default value. |
inherit | Inherits property from its parent element. |