Animation purpose, timing, easing philosophy, and motion as a design language element rather than decoration.
Every animation answers one of these questions:
If an animation doesn't answer any of these, remove it.
Most UI animations should be under 300ms. Users perceive anything longer as slow. The exception is orchestrated sequences where staggered delays create rhythm.
/* Snappy entrance */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
/* Smooth move */
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
/* Gentle settle */
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
When animating multiple items (list items, grid cards), stagger by 30-60ms per item. Cap total duration at 600ms (after ~10 items, start them together in groups).
Always respect prefers-reduced-motion. This is not optional.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}