EN

Course

Web animation

Move page elements smoothly with transition, transform, and keyframes.

Start learning

What is web animation?

Web animation · Lesson 1 / 8

First steps2 lessons

  1. 01What is web animation?transitiontransform@keyframes
  2. 02Change smoothly with transitiontransitiontransition-durationtransition-delay

Animation basics2 lessons

  1. 03Change appearance with transform — grow, rotate, movetransformscale()rotate()translate()transform-origin
  2. 04Build hover effects by combining tools:hover:activetransitiontransformbox-shadow

Looping motion1 lesson

  1. 05Make repeating motion with @keyframes@keyframesanimationanimation-delay

Going further3 lessons

  1. 06Start motion on a click (combining with JS)classList.toggle()addEventListener()max-height
  2. 07Start motion on scrollIntersectionObserverclassList.add()querySelectorAll()transition-delay
  3. 08Respecting the "keep motion subtle" settingprefers-reduced-motion@media