Home > Abakada: Back to Basics > Language References > CSS Properties > Animation Properties

---

CSS animation allow authors to animate values of CSS properties over time by using keyframes. This section describes the specific animation properties currently supported.

Property	Description
animation	A shorthand notation for setting the animation sub-property values in a single declaration.
animation-composition	Defines the composite operation used when multiple animations affect the same property simultaneously.
animation-delay	Specifies when the animation will start, or the wait time before the animation actually begins.
animation-direction	Sets the playback direction of the associated animation effect.
animation-duration	Specifies how long the animation will last, or the duration over which the animation should occur.
animation-fill-mode	Specifies the effect of an animation when it is not in play.
animation-iteration-count	Specifies the number of times an animation cycle is played.
animation-name	Defines the keyframe animation names that will apply.
animation-play-state	Specifies whether the animation is running or paused.
animation-timeline	Defines the timeline used with the animation.
animation-timing-function	Describes how the animation will progress between each pair of keyframes.

This section assumes you already have some familiarity with the basics of CSS animation. If not, I suggest starting with a brief overview on Understanding and Using CSS Animations.

External references: CSS Animations Level 1   CSS Animations Level 2.

CSS Filter Functions, CSS Transform Functions, CSS Transition Properties