The CSS animations go even further by allowing us to define keyframes that specify what an element’s properties should be at each stage of the animation. As with transitions, it’s left up to the browser to work out how to animate a smooth change from one keyframe to the next.
The animation property is a shorthand property for six of the animation properties:
animation: name duration timing-function delay iteration-count direction fill-mode play-state | initial | inherit;
The following list shows all the possible values to be used with the animation property:
- animation-name; Defines the keyframe’s name that will be bound to a selector.
- animation-duration; Defines how many seconds or milliseconds an animation will last.
- animation-timing function; Defines the speed curve of the animation.
- animation-delay; Defines a delay before the start of the animation.
- animation-iteration-count; Defines how many the animation will be played.
- animation-direction; Defines if animation will be played in reversed on alternate cycles.
- animation-fill-mode; Defines the values applied to the animation outside the execution time.
- animation-play-state; Defines if animation is running or is paused.
- initial (default value), inherit
Within the animation property we may specify one or more of the values (as listed above), as well as initial or inherit.
The example with CSS3 animation property: