Animation Properties
Important animation properties include animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
The animation shorthand combines these properties.
Animation Property Pipeline
Animation Configuration
.loader {
animation:
spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}💡 The animation loops forever because the iteration count is
infinite.Key Takeaways
- The animation shorthand combines multiple animation properties.
- Infinite animations should be used carefully because continuous motion can be distracting.
Knowledge Check
Which value makes an animation repeat indefinitely?