Transitions and motion

Add feedback with motion that feels fast, purposeful and accessible.

Beginner 11 min read Lesson 14 of 480 Challenge included

What you will be able to do

Animate with transform and opacity
Use easing intentionally
Respect prefers-reduced-motion

Motion should explain what changed. Animate transform and opacity because browsers can composite them cheaply. Avoid animating layout properties like width and top.

motion.cssCSS

.card {
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -20px rgb(23 19 15 / 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}

Live exampleA button that responds

Your turn

Accessible hover lift

Medium

Add a 180ms lift on hover, and remove it when the user prefers reduced motion.

CSS · starter

.card:hover {
  /* your rules here */
}

Check your understanding before moving on.

Knowledge checkQuestion 1

Which properties are safest to animate for performance?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Transforms and keyframes

Lesson 14 of 480 · 0% of course