Transforms, transitions, and reduced motion
Transforms such as scale-*, translate-*, and rotate-* can add subtle interaction feedback. Transforms generally do not change the normal document flow, so large movements may overlap neighboring content. Transition only the properties that need animation and keep durations short enough to feel responsive.
Respect reduced-motion preferences. Avoid making important information available only through animation, and provide a reduced-motion alternative for nonessential movement. For complex animations, CSS keyframes or an animation library may be more appropriate than stacking many utility classes.
Motion should explain state
Use animation to signal a change or affordance—not as decoration that competes with reading or makes the interface slower.
Subtle card interaction
<a href="#details" class="block rounded-xl border bg-white p-5 transition duration-200 hover:-translate-y-0.5 hover:shadow-md motion-reduce:transform-none motion-reduce:transition-none">
<h3 class="font-semibold">Read the release notes</h3>
<p class="mt-2 text-sm text-slate-600">Review what changed in the latest version.</p>
</a>đź’ˇ The card lifts slightly and gains shadow on hover.
motion-reduce: removes movement and transition for users who request reduced motion. The link remains functional without animation.