The animation property is a shorthand property for setting the longhand animation properties: 3je5e

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

It takes one or multiple comma-separated values, where each value calls and controls a @keyframes rule defines the actual animation sequence, and is controlled by the animation properties.

/* syntax of one animation definition */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

/* two animation definitions */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state],
           [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
                

The longhand properties are space-separated, and their order doesn’t matter except when using both <time> values in your definition, the first one will be considered the animation duration, and the second one will be considered the animation delay.

Any value that you don’t explicitly set will be set to its default value. That is why you have to specify an animation name otherwise no animation will be applied. If you don’t apply an animation duration, it will default to ‘0s’, and the animation effect occurs instantaneously and thus the keyframes have no effect.

Animations can be applied to only a subset of all CSS properties. The following are two resources listing the animatable properties in CSS:

• CSS Transitions Module
• CSS Animatable Properties

/* one animation */
animation: bounce .3s ease-in-out 1s infinite;
animation: rotate-out 1s steps(3, end);
animation: .3s ease 1s reverse open-up;

/* multiple animations */
animation: shake .3s alternate,
           jump 1s cubic-bezier(.17,.67,.85,.06) alternate;
                

animation-name: bounce;
animation-duration: .3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;