The Web: HTML & CSS

✨ Transitions, transforms and animations

Bring your interfaces to life: transform elements, animate state changes with transitions and create motion with @keyframes, while respecting accessibility preferences.

What you'll learn

Move, scale and rotate elements with transform without affecting the document flow
Smooth out state changes (such as :hover) with transition, tuning property, duration and easing
Create frame-based animations using @keyframes and the animation property
Respect accessibility by reducing motion with prefers-reduced-motion

Lessons

transform: move, scale and rotatetranslate, scale and rotate without affecting the document flow. transition: animate state changesSmooth out changes (e.g. on :hover): property, duration and easing. @keyframes, animation and prefers-reduced-motionComplex frame-based animations, respecting accessibility.

Practice this module in the app

DevPath is a hands-on course: you read the theory here; in the app you put it into practice with exercises that really run, offline.

Start free in the app →