# 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.md` 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.