When should I use a transition instead of an animation?
Transitions are perfect for state changes triggered by user interaction or class toggles, like hover effects, theme swaps, and accordion expands. They run once between two states with no need for keyframes. Use animations when you need a multi-step sequence, looping behavior, or motion that starts on its own without a state change. Most simple UI motion is best handled by transitions.
Which CSS properties can be transitioned?
Any property whose value type is animatable, which includes colors, lengths, opacity, transforms, filters, and more. Discrete properties like `display`, `visibility` (in older browsers), and `position` jump instantly. Modern browsers support `display: none` to `display: block` transitions when combined with `transition-behavior: allow-discrete;` and the `@starting-style` rule, enabling true enter/exit animations without JavaScript.
Why does my transition only work in one direction?
A transition runs whenever a transitioned property changes value, in either direction. If only one direction animates, the start state probably has no transition declared. Make sure `transition` is set on the base selector (not just `:hover`), so the browser knows to animate both into and out of the hover state. Defining the transition only inside `:hover` makes the return jump instantly.
How do I transition multiple properties with different timings?
List them comma-separated in the `transition` shorthand: `transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1);`. Each property gets its own duration, timing function, and delay. This is far more flexible than `transition: all`, which can also cause unintended animations when properties you didn't mean to animate change.
Why should I avoid `transition: all`?
Although convenient, `transition: all` animates every property change including ones you didn't intend, which can cause performance issues and odd visual glitches when layout properties shift. It also makes browsers do more work checking each property. Always list the specific properties you want to animate; this is faster, more predictable, and clearly documents intent for anyone reading the code later.
Can I use transitions for enter and exit animations?
Yes, with the modern `@starting-style` rule. Define the initial state inside `@starting-style` and the final state on the element; the browser transitions between them when the element appears. For exit, use `transition-behavior: allow-discrete;` so properties like `display: none` participate in the transition. This pattern eliminates the need for JavaScript timers or animation libraries for many enter/exit effects.
