Motion and Interaction

Motion should clarify cause and effect: what changed, where it moved, or which element is active. It should not delay access to content or make interaction harder.

Transition state changes

01.button {
02  transition: transform 160ms ease, background-color 160ms ease;
03}
04.button:hover { transform: translateY(-2px); }
05.button:active { transform: translateY(0); }
06.button:focus-visible { outline: 3px solid #f46537; outline-offset: 3px; }

Name the properties instead of using transition: all. Transforms and opacity are generally efficient and do not reflow surrounding layout.

Create a purposeful animation

01@keyframes pulse {
02  50% { opacity: 0.45; }
03}
04.loading-dot { animation: pulse 900ms ease-in-out infinite; }
05
06@media (prefers-reduced-motion: reduce) {
07  .loading-dot { animation: none; }
08}

Animation needs a clear resting state. Infinite motion should be rare and easy to avoid through reduced-motion preferences.

Interaction states are a set

Design default, hover, focus-visible, active, disabled, selected, loading, and error states together. Hover is unavailable on many touch devices and cannot be the only path to information.

Keep this

Animate a reason, keep durations short, preserve focus visibility, and provide a calm reduced-motion experience.