Transforms and keyframes

Move, scale and rotate without triggering layout, then choreograph a sequence.

Beginner 14 min read Lesson 15 of 480 Challenge included

What you will be able to do

Compose transforms in the right order
Write keyframes with fill modes
Disable motion when requested

Transforms change how an element is painted without reflowing its neighbours. Keyframes define a sequence that CSS runs on its own.

motion.cssCSS

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card {
  animation: pop-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.spinner {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .spinner {
    animation: none;
  }
}

Live exampleEntrance and spinner

Transform order matters: translate then rotate is not the same as rotate then translate.
Use animation-fill-mode: both so the start and end states persist.
Avoid infinite motion close to text; it competes with reading.
Always provide a prefers-reduced-motion override for decorative motion.

Your turn

Pulse once, then respect reduced motion

Medium

Animate a badge from scale 1 to 1.08 and back, and disable it for reduced-motion users.

CSS · starter

.badge {
  /* animation here */
}

Check your understanding before moving on.

Knowledge checkQuestion 1

Which animation property keeps the final keyframe applied after the animation ends?

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: Project: a design system

Lesson 15 of 480 · 0% of course