Phase 10 — CSS Motion Allowed

This gauge covers Chapter 14 after Tables and Lists.

Learning goal

Use motion to clarify state changes and relationships without making content harder to perceive, operate, or understand.

Inherited tools

Everything allowed through ./phase9-allowed.html remains available.

New CSS

Transitions

• transition-property
• transition-duration
• transition-timing-function
• transition-delay
• transition

Transforms

• transform
• transform-origin
• opacity
• translate()
• scale()
• rotate()

Animations

• @keyframes
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• animation

Motion preference

• @media (prefers-reduced-motion: reduce)

Learning rules

1. Use a transition for a change between an element's existing state and a clearly defined new state such as hover or keyboard focus.
2. Name the properties that should transition. Avoid transition: all, which can animate an unintended future change.
3. A transition needs a duration greater than zero and a property whose start and end values can be interpolated.
4. Keep hover and focus presentations consistent when both users perform the same action. Never reveal essential content only on hover.
5. translate() moves the rendered box without reserving a different place in normal flow.
6. scale() changes the rendered size without causing surrounding layout to reflow. Leave enough space to prevent overlap.
7. rotate() turns the rendered box around its transform-origin, which defaults to the centre.
8. Transform functions are applied together in one transform value. Their order can change the result.
9. Use @keyframes when motion needs intermediate steps or should run without a state change.
10. Connect keyframes to an element with animation-name and a duration. Additional animation properties control pacing, delay, repetition, direction, and retained keyframe styles.
11. Prefer motion involving transform and opacity when practical because it usually avoids repeated layout work.
12. Keep motion brief, purposeful, and limited. Do not use rapid flashing, large unexpected movement, or endless animation that competes with content.
13. Respect prefers-reduced-motion: reduce by removing nonessential animation and reducing nonessential transition movement.
14. Motion must not be the only way an interface communicates state or meaning.

Not allowed

• JavaScript-driven animation
• Essential information revealed only through hover or animation
• Rapid flashing or strobing effects
• Large automatic movement that obscures content or controls
• Infinite decorative animation without a reduced-motion alternative
• transition: all
• Inline styles
• Any HTML tag, attribute, or CSS property not inherited or listed above

Pages

• 01-transitions.html — smooth hover and focus state changes
• 02-transforms.html — translate, scale, rotate, origin, and function order
• 03-basic-animations.html — keyframes, animation properties, and reduced motion

Rules to lean on

Rules 2, 43–45, 54–59, 72–80, 88, 93, 99–106, 121, and 145–154.