The CSS animation Shorthand Property
The animation property is a shorthand for all the individual animation properties.
As we saw in the previous lesson, writing out animation-name, animation-duration, animation-timing-function, etc., can get tedious and take up a lot of horizontal space.
You can combine all of these into a single property using the shorthand animation property.
Syntax
The shorthand syntax expects the properties in a specific order (though many can be shifted around as long as the duration comes before the delay):
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];At an absolute minimum, you only need to provide the name and the duration. All other properties will fall back to their default values (e.g., 0s delay, 1 iteration, ease timing function).
Shorthand Example
Here is the exact same bouncing ball animation from the previous lesson, but this time using the shorthand syntax.
Instead of six lines of code to define the animation behavior, we only needed one:
animation: bounce 0.5s ease-in 1s infinite alternate;Writing your CSS using the animation shorthand is the recommended approach because it results in smaller, more readable stylesheets.