Motion
Add motion that helps: smooth changes with transitions, move, turn and grow things with transforms, play keyframe animations, and make every bit of it calm down for readers who ask for less motion.
Updated
Transitions and Transforms
- Transitions: Smooth Changes (Apprentice): A transition makes a change in CSS happen smoothly over a short time instead of in one jump, so a button that changes color on hover or focus eases into its new look.
- Transforms: Move, Turn and Grow (Apprentice): Transforms slide, turn and resize an element with translate, rotate and scale without moving anything around it, which makes them the tool for a button that lifts, a card that tilts or a badge that grows.
Animation
- Keyframe Animations (Journeyman): A keyframe animation describes motion as a few key moments in a @keyframes rule and plays it with the animation property, so a spinner turns, a title slides in and a Start button pulses with no reader action needed.
- Motion That Respects the Reader: prefers-reduced-motion (Journeyman): Motion can make some people dizzy or sick, so a prefers-reduced-motion media query stops the loops and calms the movement for every reader who asks for less, while keeping the motion that helps.
Exercise: An Animated Game Start Screen
- Exercise: An Animated Game Start Screen (Journeyman): Bring Star Hopper's start screen to life with twinkling stars, a title that slides in, buttons that lift on hover and focus and a looping loading bar, then calm it all for reduced motion, while the tests check every rule.