# 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: November 10, 2026

## [Transitions and Transforms](https://www.ask-codey.com/courses/css-in-depth/topics/css-transitions-and-transforms)

1. [Transitions: Smooth Changes](https://www.ask-codey.com/lessons/css-transitions) (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.
2. [Transforms: Move, Turn and Grow](https://www.ask-codey.com/lessons/css-transforms) (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](https://www.ask-codey.com/courses/css-in-depth/topics/css-animation)

1. [Keyframe Animations](https://www.ask-codey.com/lessons/css-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.
2. [Motion That Respects the Reader: prefers-reduced-motion](https://www.ask-codey.com/lessons/css-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](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-game-start-screen)

1. [Exercise: An Animated Game Start Screen](https://www.ask-codey.com/lessons/exercise-css-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.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-motion