1.12 — CSS Animations & Motion Design: Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

1. Skim top-to-bottom in one pass before interviews or exams.
2. If a row feels fuzzy — reopen the matching lesson: README.md → 1.12.a…1.12.e.
3. Drills — 1.12-Exercise-Questions.md.
4. Polished answers — 1.12-Interview-Questions.md.

---

1.12.a CSS Transitions

Shorthand

transition: property duration timing-function delay;
transition: transform 300ms ease-out 0s;

Sub-properties

Property	Default	Notes
transition-property	all	Prefer listing explicitly
transition-duration	0s	0s = instant (no animation)
transition-timing-function	ease	Keywords or cubic-bezier()
transition-delay	0s	Negative values start partway

Timing functions

Keyword	Cubic-bezier	Feel
ease	(0.25, 0.1, 0.25, 1.0)	General purpose
linear	(0, 0, 1, 1)	Constant speed
ease-in	(0.42, 0, 1, 1)	Slow → fast (exiting)
ease-out	(0, 0, 0.58, 1)	Fast → slow (entering)
ease-in-out	(0.42, 0, 0.58, 1)	Slow → fast → slow

Duration guide

Range	Perception	Use
100–200 ms	Instant	Color change, icon swap
200–300 ms	Responsive	Buttons, tooltips
300–500 ms	Smooth	Panels, modals
> 500 ms	Slow	Dramatic reveals only

JS events

transitionrun → transitionstart → transitionend (or transitioncancel)

---

1.12.b CSS Transform

Transform functions

Function	What it does	Example
translateX(v) / translateY(v)	Move on one axis	translateX(50px)
translate(x, y)	Move on both axes	translate(10px, 20px)
scale(f) / scale(x, y)	Resize	scale(1.2)
rotate(angle)	Spin (clockwise = positive)	rotate(45deg)
skewX(a) / skewY(a)	Shear	skewX(-5deg)

Key rules

• Transforms are visual only — no layout reflow.
• Order matters: rotate translate ≠ translate rotate.
• Default transform-origin: 50% 50% (center).
• % in translate = relative to element's own size.

Centering trick

position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);

---

1.12.c 3D Transforms

Perspective

Method	Scope
perspective: 800px (parent)	Shared vanishing point
transform: perspective(800px) …	Per-element vanishing point

Small value = extreme depth. Large value = subtle depth.

3D functions

Function	Axis
rotateX(a)	Tips forward/back
rotateY(a)	Turns left/right
rotateZ(a)	Same as 2D rotate()
translateZ(v)	Toward/away from viewer

Essential properties

Property	Purpose
transform-style: preserve-3d	Children live in 3D space
backface-visibility: hidden	Hide element when facing away
perspective-origin	Move vanishing point

Card-flip recipe

Parent:     perspective: 600px
Wrapper:    preserve-3d; transition: transform 600ms
Front:      backface-visibility: hidden
Back:       backface-visibility: hidden; rotateY(180deg)
Hover:      wrapper rotateY(180deg)

---

1.12.d Keyframe Animations

Syntax

@keyframes name {
  0%   { /* start */ }
  50%  { /* midpoint */ }
  100% { /* end */ }
}

.el { animation: name 500ms ease-out 0s 1 normal forwards running; }

Sub-properties

Property	Values
animation-name	Custom name
animation-duration	Time
animation-timing-function	Same as transition
animation-delay	Time (negative = start partway)
animation-iteration-count	Number or infinite
animation-direction	normal · reverse · alternate · alternate-reverse
animation-fill-mode	none · forwards · backwards · both
animation-play-state	running · paused

Fill-mode quick reference

Value	During delay	After end
none	Own styles	Snaps back
forwards	Own styles	Keeps to
backwards	Applies from	Snaps back
both	Applies from	Keeps to

Common patterns

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 0.8s linear infinite; }

/* Fade-in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

JS events

animationstart → animationiteration → animationend (or animationcancel)

---

1.12.e Animation Performance

The rendering pipeline cost

  Property animated        Stages triggered
  ────────────────────     ───────────────────────
  width / height / top     Layout → Paint → Composite  (expensive)
  color / box-shadow       Paint → Composite            (moderate)
  transform / opacity      Composite only               (cheap ✓)

Frame budget

60 fps = 1000ms / 60 = 16.67 ms per frame

will-change rules

Do	Don't
Apply to elements about to animate	* { will-change: transform; }
Remove after animation ends	Leave on permanently
Measure first, optimize second	Use as a magic fix

GPU memory per layer

width × height × devicePixelRatio² × 4 bytes
Example: 300×200 @2x = 600×400×4 = 960 KB

Animatable vs non-animatable properties

Animatable (safe)	Animatable (expensive)	NOT animatable
transform	width, height	display
opacity	margin, padding	font-family
color	top, left, right, bottom	position (keyword)
background-color	border-width	float
border-color	font-size	overflow (keyword)
border-radius	box-shadow	grid-template-*

Performance checklist

1. Animate transform + opacity only
2. Convert top/left → translateX/Y
3. Convert size animations → scale()
4. Animate shadows via pseudo-element opacity
5. Use will-change sparingly
6. Respect prefers-reduced-motion
7. Pause off-screen infinite animations
8. Test on low-end devices (CPU throttle 4×)

prefers-reduced-motion template

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

---

Quick formulas

Frame budget:         1000 ÷ 60 = 16.67 ms
GPU layer memory:     W × H × DPR² × 4 bytes
Transition events:    one transitionend per animated property
Animation events:     one animationend per animation name

---

Full lessons → README.md · Drills → 1.12-Exercise-Questions.md · Interviews → 1.12-Interview-Questions.md