A CSS transition creates a smooth visual change when an HTML element moves from one state to another. Instead of changing instantly, a property can fade, scale, rotate, recolor, or otherwise change over time. section 7.2.3
Transitions are especially useful for simple interactions, such as making hidden content visible or changing text from one style to another. They normally connect an initial state to a final state after a user interaction or other trigger. section 7.4.2
Plan a transition by choosing these settings:
- Type: choose the CSS property whose change should be animated. section 7.4.2
- Duration: set how long the change takes, using seconds or milliseconds. section 7.4.2
- Speed: choose how quickly the effect progresses during its duration. section 7.2.3
- Delay: decide whether the effect should wait before starting. section 7.2.3
A simple text change
Set normal text to black and non-italic, then define its changed state as pink and italic. A transition makes the movement between those two states smooth, and reversing the state smoothly returns the text to its original appearance. section 7.4.2
Use transitions for focused, state-based effects. Choose animation tools instead when the design needs multiple keyframes, continuous playback, looping, or more complex timing and sequencing. section 7.4.2
A visual editor such as YellowPencil can adjust transition settings, including duration and delay, without requiring every setting to be written manually. section 7.4.2
