Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation Property

Sets the separate animation properties in a single declaration.

Values in square brackets [ ] are optional.

IMPORTANT: The style rule within each animation definition must be specified in the order of property values stated above, except for the animation name, which can be defined first or last in the list. Otherwise, the declaration is deemed invalid and no animation will occur.

The following describes the possible composite properties that can be declared for one CSS animation ( single-animation ).

The listed valid values correspond to the values valid for each of the separate animation sub-properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline.

The animation property is a shorthand notation for setting any or all of the animation property values in one composite declaration.

For example, this set of style rules for the individual animation sub-properties ...

#target {
   animation-name: glide-grow-shrink;
   animation-duration: 2.5s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: 4;
   animation-direction: alternate;
   animation-fill-mode: both;
}

... could be replaced by using the following animation shorthand, each property value separated by a space.

#target {
   animation: glide-grow-shrink 2.5s ease-in-out 4 alternate both;
}

The animation property is specified as a space-separated list of values for a single animation, in the order stated above.

In its simplest form, a single animation must define, at the minimum, the keyframes name and duration.

selector { animation: keyframes-name duration }

Optional property values can be added, if needed, in the order stated above.

selector { animation: keyframes-name duration easing delay iteration direction }

The animation shorthand property can specify more than one single animation definitions, separated by commas.

Note that the order of values is important within each animation definition, otherwise no animation will occur.

selector { animation: 1st-animation set of property values, 2nd-animation set of property values [, ... ] }

Note, though, that the individual sub-property settings can still be used if desired, or when needed, or to avoid listing the animation sub-properties in the wrong order.

The following examples demonstrate use of the animation shorthand property.

Basic Animation: Fade-In Fade-Out Run Sample | View Source

Basic Animation: Gradient Shift Run Sample | View Source

Basic Animation: Image Crossfade Run Sample | View Source

The following examples demonstrate multi-image variations of the above.

Basic Animation: Multi-Image Fade-In-Out Run Sample | View Source

Basic Animation: Multi-Image Dissolve Run Sample | View Source

For a brief overview, please see Understanding and Using CSS Animations.

animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function