Most often, a transition is just a single stage, transitioning from the current state of the object to the desired target state (keyframe).
Animated transitions can significantly improve graphical perception.
Transitions are often initiated by events, such as:
- the arrival of new data over the wire
- or user interaction.
Since transitions are not instantaneous — they have a duration — that could mean multiple transitions competing to control the fate of elements. To avoid this, transitions should be exclusive, allowing a newer transition to pre-empt (to interrupt) an older one. However, such exclusivity should not be global. Multiple concurrent transitions should be allowed, as long as they operate on different elements.
Example: If you quickly toggle between stacked and grouped bars below, you can send waves rippling across the chart: See Stacked-to-Grouped Bars.
Animate between two SVG paths or canvas shapes in a visualization when the shapes