Transitions
A transition smoothly interpolates a property when its value changes, for example on hover or when a class toggles.
- transition property: which property animates, or all.
- transition duration: how long the change takes.
- transition timing function: the easing curve, such as ease, linear, or cubic bezier.
- transition delay: a wait before starting.
Transitions need a trigger and a start and end value. They cannot loop or define intermediate steps.
Keyframe animations
For multi step or looping motion you need animation with a keyframes block. Keyframes describe values at named percentages from 0 to 100.
- animation name links to the keyframes.
- animation duration, iteration count, and direction control timing and looping.
- animation fill mode decides whether the element keeps the first or last frame outside the run.
Animate cheap properties. transform and opacity run on the compositor and avoid layout, while animating width or top forces expensive reflow each frame.
Key idea
Use transitions for simple two state changes and keyframe animations for looping or multi step motion, preferring transform and opacity for smooth frames.