The animation property is shorthand for
animation-duration property must always be specified or else the duration will default to 0 and the animation will never be displayed.
/* wrap <code> tags inside <pre> tags to create code blocks like this */
Specify the name for the @keyframes animation.
Specifies how long an animation should take to complete a full cycle.
Designates the speed curve of an animation.
Sets a delay for the start of an animation. This value is defined in seconds or milliseconds.
Specifies how many times an animation should be played.
Sets whether an animation should be played forwards, backwards, or both alternating.
Designates a style for the element before the animation starts, after it ends, or both.
Specifies whether the animation is running or paused.
Sets the property to its default value.
Inherits this property’s value from its parent item.
User-submitted codepen.io examples of
Submit a codepen.io link that demonstrates
Help @reference spread the word by sharing this article on Twitter...Tweet This