Subtle motion guides attention: hover states, pressed buttons, expanding panels. Experienced developers pair motion with accessibility—not everyone wants animation.
Safe defaults
- Animate
transformandopacitywhen possible (often smoother than layout properties). - Keep durations short (roughly 120–250ms for UI feedback).
- Honor
@media (prefers-reduced-motion: reduce)to disable or simplify motion.
HTML hook
Use real elements (button, details) so keyboard users get behavior without custom JavaScript—CSS enhances state.
Challenge
Reduced-motion fallback
- Add a transition on button hover.
- Add a
prefers-reduced-motionblock that setstransition: none. - Test in DevTools → Rendering → emulates reduced motion.
Done when: hover still changes color instantly when reduced motion is on.
Go deeper — Performance note (intermediate / experienced)
Animating width, height, or top can trigger layout on every frame. Prefer transform: scale() or translate for chips and cards. For complex timelines, CSS animations or JS-driven motion libraries may be appropriate—still gate behind reduced motion.