Animation composition: accumulate and add
Understanding animation-composition: how multiple keyframe animations combine with accumulate, add, and replace modes. Advanced keyframe control.
Animation direction: normal, reverse, alternate
Control animation playback direction with animation-direction. Learn when to use reverse, alternate, and alternate-reverse for smooth looping effects.
animation-fill-mode: forwards, backwards, both
Understanding what happens before and after a CSS animation — how fill modes control the resting state.
Animation iteration count and infinite loops
Control animation repetition with animation-iteration-count. Learn when to use finite vs infinite loops and how to stop animations cleanly.
Animation play state: pausing animations
Control animation playback with animation-play-state. Pause, resume, and programmatically control keyframe animations without removing them.
Attention-seeking animations: pulse, shake, bounce
CSS keyframe recipes for pulse, shake, and bounce — attention-grabbing animations that work without JavaScript.
Border and outline transitions
Border radius, width, and color transitions explained. When to use outline vs box-shadow for focus states.
Chaining transitions with delay
Create cascading animation sequences using CSS transition delays. Stagger multiple properties for polished, professional effects.
Color transitions in different color spaces
How color transitions differ across sRGB, display-p3, oklch, and oklab — and why oklch produces more perceptually uniform color interpolations.
Common transition patterns: hover, focus, state
Practical transition recipes for hover effects, focus states, and component state changes — the patterns you'll use every day.
CSS transitions from scratch
Learn CSS transitions: property, duration, timing function, delay, which properties to transition, and performance best practices.
cubic-bezier(): custom easing curves
Design custom timing functions with cubic-bezier() — from bouncy springs to dramatic slow-ins.
Debugging transitions in DevTools
How to diagnose stuttering transitions, dropped frames, and jank using Chrome DevTools Performance, Layers, and Rendering panels.
Easing functions explained
CSS easing functions: ease, cubic-bezier, steps, and linear() for natural-feeling animations.
Entry and exit transitions in CSS
Complete guide to element creation and removal animations in CSS: @starting-style, transition-behavior, and the overlay property for dialogs.
Functional motion & scroll-driven animations
Using scroll and view timelines for UX, not just decoration.
GPU layers and will-change for transitions
How browsers use GPU layers to accelerate CSS transitions, when will-change helps, and when it hurts. A practical guide to compositor-thread animations.
@keyframes: CSS animation sequences
Deep dive into @keyframes: syntax, fill-mode, iteration, direction, play-state, and performance tips for smooth CSS animations.
Performance: which properties are safe to transition?
Not all CSS properties animate equally. Learn which trigger layout, paint, or composite — and which are safe for 60fps.
prefers-reduced-motion
How to use prefers-reduced-motion: what it is, default-on vs. opt-in approaches, and which animations to remove for accessible motion design.
Scroll-driven animations from scratch: animation-timeline
Build scroll-linked animations with animation-timeline, scroll() and view() — no JavaScript IntersectionObserver needed.
Shadow transitions: performance tips
Box-shadow and drop-shadow transitions can cause paint-heavy animations. Learn when and how to animate shadows efficiently.
Size transitions and layout shifts
Why animating width and height causes layout thrashing, and how to use transform for smooth size changes without layout shifts.
@starting-style: animating element creation
How @starting-style lets you transition from display: none. Entry animations without JavaScript.
transition-behavior: allowing discrete transitions
Transitions for discrete properties like display, visibility, and overlay are now possible with transition-behavior: allow-discrete.
Transition shorthand: order matters
The CSS transition shorthand has a specific order for duration and delay. Learn how to avoid the most common transition bug.
Transitioning multiple properties
How to transition multiple CSS properties simultaneously — syntax, performance, and when to use transition: all vs. explicit lists.
Transitioning to/from display: none with @starting-style
Animate elements appearing from and disappearing to display: none using @starting-style and transition-behavior: allow-discrete. No JavaScript required.
View Transitions API
Native page and element transitions — the View Transitions API.