SESSION 017 — Animations

CONCEPTS.UNLOCKED

⟶

CSS Transitions

Smoothly animate property changes over time. transition: property duration timing-function delay — when a value changes (e.g. on :hover), it animates instead of snapping.

〰

Timing Functions

ease (default, slow-fast-slow), ease-in (slow start), ease-out (slow end), ease-in-out (slow both), cubic-bezier() (custom curve). Each creates different "feel."

🎬

CSS @keyframes Animations

Multi-step animations: define named keyframes with from/to or percentages, then apply with animation: name duration timing iteration.

🔄

Transform

scale(), rotate(), translateX/Y(), skew() — all hardware-accelerated by the GPU. Fast and smooth even on mobile.

⚡

What to Animate (and What NOT to)

Animate transform and opacity (fast — GPU compositing only). Avoid animating width, height, margin (slow — triggers layout recalculation for every element on the page).

♿

Reduced Motion

@media (prefers-reduced-motion: reduce) — respect user preferences. Some users experience motion sickness or seizures from animations. Always provide this escape hatch.

HANDS-ON.TASKS

Button Hover Transitions

▶

.tool-btn {
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              transform 0.1s ease;
}

.tool-btn:hover {
  background-color: #0f3460;
  border-color: #00b4d8;
}

.tool-btn:active {
  transform: scale(0.95);
}

Without transitions, hover is an instant snap. With transitions, it's a smooth fade. 0.2s is the sweet spot — fast enough to feel responsive, slow enough to notice.

Settings Panel Slide-In

▶

.settings-panel {
  transition: transform 0.3s ease;
}

.settings-panel.collapsed {
  transform: translateX(100%);
}

When the .collapsed class is toggled, the panel slides off-screen to the right. Remove the class → it slides back in.

Loading Spinner with @keyframes

▶

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #2a2a4a;
  border-top-color: #00b4d8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes defines the animation steps. The animation property applies it: name (spin), duration (0.8s), timing (linear = constant speed), iteration (infinite = forever).

Fade-In for Canvas Image

▶

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.canvas-area img {
  animation: fadeIn 0.3s ease-out;
}

When an image loads, it fades in and slightly scales up — a subtle effect that makes the app feel polished.

Respect Accessibility — Reduced Motion

▶

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

This disables all animations for users who have enabled "Reduce motion" in their OS settings. You can test by toggling this in DevTools → Rendering → Emulate prefers-reduced-motion.

Experiment & Close the Ticket

▶

Try different timing functions, durations, and transforms. What feels snappy? What feels sluggish? What feels bouncy?

git switch -c design/PIXELCRAFT-007-animations
git add src/styles/
git commit -m "Add UI transitions and animations (PIXELCRAFT-007)"
git push origin design/PIXELCRAFT-007-animations
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Animation frames and the rendering pipeline.

When you set transition: 0.3s, the browser calculates intermediate values for 18 frames (60fps × 0.3s). Each frame goes through:

// The rendering pipeline per frame:

Recalculate Style → Layout → Paint → Composite

// Animating transform/opacity:
  Only triggers "Composite" (fast, GPU)

// Animating width/height/margin:
  Triggers "Layout" (slow, recalculates
  every element on the page)

// Understanding the rendering pipeline
// lets you write animations that run at
// 60fps even on mobile devices.

REF.MATERIAL

ARTICLE

Using CSS Transitions — MDN

Mozilla Developer Network

Complete guide to CSS transitions: properties, durations, timing functions, delays, and practical examples.

TRANSITIONSMDNREFERENCE

VIDEO

CSS Animations in 100 Seconds — Fireship

Fireship

Rapid overview of transitions, @keyframes, and animation properties. The fastest way to get the mental model.

ANIMATIONSQUICK

TOOL

cubic-bezier.com

Lea Verou

Visual tool for creating custom cubic-bezier timing functions. Drag the control points and see the animation curve in real time.

TIMINGVISUAL TOOL

ARTICLE

Animations Guide — web.dev

Google

Performance-focused animation guide: which properties to animate, how the rendering pipeline works, and how to hit 60fps.

PERFORMANCE60FPS

VIDEO

CSS Transitions & Animations — Kevin Powell

Kevin Powell

In-depth tutorial on transitions, keyframe animations, transform, and building real UI animation patterns.

ANIMATIONSDETAILED

UI FEELS DEAD