CSS Animations

What are Animations?

CSS animations let you create complex, multi-step animations using @keyframes. Unlike transitions, animations can run automatically and loop!

Basic Keyframes

Define animation steps with @keyframes, then apply with animation-name and animation-duration.

Percentage Keyframes

Use percentages for multi-step animations. 0% = start, 100% = end.

Animation Iteration

animation-iteration-count controls how many times the animation runs. Use infinite for endless loops.

Animation Direction

animation-direction controls playback: normal, reverse, alternate, alternate-reverse.

Animation Fill Mode

animation-fill-mode controls styles before/after animation: none, forwards, backwards, both.

Animation Shorthand

Combine all properties: animation: name duration timing-function delay iteration-count direction fill-mode.

Summary