CSS Transitions, Animations, and Reduced Motion

Animate state changes smoothly and respect users who prefer less motion.

.button {
  background: #0b5fff;
  transition: background-color 200ms ease, transform 200ms ease;
}
.button:hover {
  background: #0846c4;
  transform: translateY(-2px);
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}
.loading { animation: pulse 1.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .loading { animation: none; }
}

Explanation

A transition animates a property from its old value to its new value when it changes, for example on hover. Name the properties, the duration, and an easing function. Prefer animating transform and opacity, which browsers can handle smoothly without re-laying out the page. A keyframes animation describes steps over time and is started with the animation property. Some people feel ill from large movements, and their operating system can tell the browser to reduce motion, so a prefers-reduced-motion media query should turn animations off or make them gentle.

—

—

—

—

—

—

—