CSS Transitions Table
| Property | Category | What it does |
|---|---|---|
| transition-property | Transition | Which CSS properties animate when they change |
| transition-duration | Transition | How long the transition takes (e.g. 0.3s) |
| transition-timing-function | Transition | The acceleration curve: ease, linear, ease-in-out, cubic-bezier |
| transition-delay | Transition | Wait time before the transition starts |
| animation-name | Animation | References a @keyframes rule |
| animation-duration | Animation | How long one cycle takes |
| animation-iteration-count | Animation | How many times to play (number or infinite) |
| animation-fill-mode | Animation | Styles applied before/after: none, forwards, backwards, both |
| transform | Transform | translate, rotate, scale, skew - changes visual position without reflow |
| transform-origin | Transform | The point around which transform operations occur (default: center) |
CSS animations come in three flavours with different performance characteristics: transitions (smooth changes between two states), animations (multi-step keyframes) and transforms (visual changes without reflow). This table covers the 10 properties verbatim from MDN, grouped by category.
The performance rule that changes how you write CSS: always animate transform and opacity - they run on the compositor at 60fps without triggering layout recalculation. Animating width, height or top forces the browser to recalculate layout on every frame.
How to use
- Filter by property or category - transition, animation, transform - to find what you need.
- Click any property to copy it into your CSS.
- Read the category column to understand the relationship: transitions need a trigger, animations play independently.
Frequently asked questions
What is the difference between transition and animation?
Transition requires a trigger (hover, class change, JS) and animates between exactly two states. Animation uses @keyframes to define multiple steps and plays independently of any trigger. Rule of thumb: use transition for interaction feedback, animation for decorative or attention-grabbing motion.
Why should I only animate transform and opacity?
The browser composites transform and opacity on the GPU without recalculating layout. Animating width, height, top or left forces layout recalculation (reflow) on every frame - which is why animating width looks janky while transform: scaleX() looks smooth. The Chrome DevTools Performance panel shows this as Layout Shift vs Composite layers.
What does animation-fill-mode: forwards do?
It keeps the styles from the last keyframe after the animation ends. Without it, the element snaps back to its original styles the moment the animation completes. fill-mode: backwards applies the first keyframe before the animation starts (during the delay period).
What is the difference between transform: translate and position: relative + top/left?
Both can move an element visually, but transform does not trigger reflow - the browser just moves the painted pixels. position: relative with top/left triggers layout recalculation for the element and potentially its siblings. For animation, transform is always the right choice.