Animation Shorthand
The animation shorthand combines name, duration, timing, delay, iterations, direction, fill-mode, and play-state.
CSS
Beginner
3 min read
The animation Shorthand
Example
/* animation: name duration timing-function delay iteration-count direction fill-mode */
.element {
animation: fadeIn 0.5s ease-out 0.2s 1 normal forwards;
}
/* Multiple animations on one element */
.complex {
animation:
slideIn 0.4s ease both,
pulse 2s ease-in-out 0.4s infinite;
} Pro Tip
When using shorthand with a delay, always specify iteration-count before it to avoid ambiguity.