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.




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-
5.0 -moz-
4.0 -webkit-
10.0 30.0   
15.0 -webkit-   
12.0 -o-