Respects prefers-reduced-motion: the animation is disabled and the final state is shown.
What is a Icon Morph?
An icon morph turns a state change into a single fluid gesture — a plus becomes a check, a menu becomes a close. Instead of swapping two elements, the shapes cross-fade and rotate so the eye reads continuity, not a cut. Keep the two states visually related or the morph looks like a glitch.
Animation Specimen
Trigger
hover
Tech
css
Duration
2s
Easing
ease-in-out
Performance
transform, opacity
When to use
Add-to-done, menu-to-close, play-to-pause
Any toggle where the icon is the status
Avoid when
Two unrelated shapes — the morph reads as a glitch
Without a text/aria label for the state
Keep the two shapes related (plus/check, menu/close) or the morph looks like a bug.