CSS

Lesson 10

Motion and reduced motion

Make motion purposeful and respect users who request less animation.

Good Code

drawer.css
.drawer {
  /* State-driven motion can be shortened for reduced-motion users. */
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.drawer[data-open="true"] {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition-duration: 1ms;
  }
}

Bad Code

drawer.css
.drawer {
  /* The animation runs for everyone and does not expose a reduced path. */
  animation: slide-in 600ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

Review Notes

What to review

Good Code

The good version keeps the state change readable while shortening the transition for users who prefer reduced motion.

Bad Code

The bad version forces the same animation on every user and hides the open state inside an animation that cannot easily respond to user preferences.

Takeaways

  • Pair animated UI with a prefers-reduced-motion path that keeps the state change clear.