animation
The animation shorthand applies a keyframe animation with name, duration, timing, iteration, and direction.
Syntax
animation: <name> <duration> <timing> <delay> <count> <direction> <fill>;
Examples
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader {
animation: spin 1s linear infinite;
}
Output
Renders a continuously rotating loader spinner.
Notes
Define steps with @keyframes. Use animation-fill-mode:forwards to retain the final state and a wrapping @media (prefers-reduced-motion: reduce) to disable nonessential motion for accessibility.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 43 |
| firefox | 16 |
| safari | 9.0 |
| edge | 12 |