Phase 10Advanced11 of 12 in CSS

Effects, Transitions and Animation

Transitions, 2D and 3D transforms, keyframe animations, filters, blend modes and masks, smooth and accessible motion, and scroll effects.

Until now every style you wrote changed instantly: a button turned blue the moment you hovered it. This phase adds time and visual effects. You'll learn transitions, which smooth a change from one value to another, transforms, which move, turn, grow and tilt a box without disturbing the layout around it, and keyframe animations, which play a whole sequence of steps on their own, as many times as you like.

Then you'll meet the effects that change how pixels are drawn: filters (blur, grayscale, shadows that follow a shape), blend modes (how colours mix with what's underneath), and clipping and masking (showing only part of a box). Each one has a cost, so the next topic explains what the browser really does each frame: which properties only need the compositor and stay smooth even on a cheap phone, what will-change really does, and how to respect people who ask for reduced motion.

The phase ends with scroll effects: snapping carousels with scroll-snap, sticky headers, and the new scroll-driven animations that tie an animation to the scrollbar with no JavaScript. Every example is live, and the ones that log print facts that don't depend on timing: event names, final computed values and measured positions. Phase 6 (positioning and stacking contexts) and Phase 3 (colours and custom properties) are the background you need; the /javascript course shows how scripts can drive the same animations.

0/6 · 0%

6 topics ~3 h 24 code blocks & diagrams

Start with the first topic

10.1

Transitions

A transition tells the browser to animate a property smoothly from its old value to its new value whenever that value changes, with a chosen duration, timing function and delay; only properties whose values can be blended in between can transition.

31 min 4 code practice

10.2

Transforms

The transform property moves, rotates, scales and skews an element's painted box, around a point set by transform-origin, without changing the layout around it; with perspective the same functions work in 3D.

29 min 5 code practice

10.3

Keyframe Animations

@keyframes describes the steps of an animation by percentage of its time, and the animation properties attach it to an element with a duration, easing, delay, number of repeats, direction and fill mode; unlike a transition, it runs by itself, can loop and can pass through many steps.

28 min 1 diagram 3 code practice

10.4

Filters, Blend Modes and Masks

filter applies photo effects such as blur, grayscale and drop shadows to an element, backdrop-filter applies them to what's behind it, mix-blend-mode mixes its colours with the content underneath, and clip-path and mask hide parts of it with a shape or an image.

29 min 4 code practice

10.5

Animation Performance and Accessibility

Smooth animation means producing a new frame every 16ms or so; animating transform and opacity lets the browser skip layout and paint and move ready-made layers on the compositor, will-change hints at this ahead of time, and prefers-reduced-motion lets you tone motion down for people it makes ill.

30 min 4 code practice

10.6

Scroll Effects

scroll-snap makes a scroll container settle on chosen items, position: sticky keeps headers in view while their section scrolls, and scroll-driven animations (animation-timeline: scroll() and view()) tie an animation's progress to the scroll position instead of to time.

29 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

A smooth hover

The button changes colour on hover, but the change is instant. Make the background colour glide over a duration between 0.1s and 0.5s.

Beginner

A card that lifts

When the card is hovered, make it rise a few pixels and grow a shadow, smoothly.

Beginner

A loading spinner

Turn the .spinner circle into a loading spinner: write a @keyframes animation that rotates it one full turn, and attach it so it spins forever at a constant speed, one turn per second or faster.

Intermediate

Calm the banner for reduced motion

The banner wiggles forever. Keep the wiggle for most people, but add a prefers-reduced-motion: reduce media query that switches the animation off for people who asked their device for less motion.