CSS Animations & Keyframes

What are CSS Animations?

CSS animations let you gradually change an element's style over time. Unlike transitions (which only animate between two states), @keyframes let you define multiple steps in an animation sequence.

Key Concepts

• @keyframes — define named animation sequences with percentage stops
• animation-name — reference a @keyframes block
• animation-duration — how long one cycle takes
• animation-timing-function — easing curve (ease, linear, cubic-bezier)
• animation-iteration-count — how many times to repeat (or infinite)

Visual Preview