HTML & CSS
/Intermediate
CSS Animations
Definition
The `animation` property is a shorthand for eight individual animation properties (name, duration, timing-function, delay, iteration-count, direction, fill-mode, and play-state).
Explain Like I'm New
Once you write a `@keyframes` script, you use the `animation` property as the 'Play Button'. You can tell the browser to play it fast, play it in reverse, delay the start by 5 seconds, or play it on an infinite loop.
Real World Example
A success checkmark that scales up and pops into existence exactly 0.5 seconds after a modal opens (`animation-delay: 0.5s;`).
Common Use Cases
- •Chaining animations together
- •Infinite loops
Interactive Example
Interview Questions
basic
- What does `animation-iteration-count: infinite;` do?
intermediate
- What is `animation-fill-mode: forwards;`?