Fade in
Element transitions from transparent to fully opaque, usually while sliding or scaling in. Best for content that should feel calm.
Vocabulary
12 categories, 48 core terms. Every term is paired with a live StyleKit animation you can copy. Speak the same language with designers, engineers, and AI prompts.
How elements appear, settle, and leave the screen.
Element transitions from transparent to fully opaque, usually while sliding or scaling in. Best for content that should feel calm.
Element enters from off-screen, traveling along an axis (left, right, top, bottom) and settling into place.
Element grows from a smaller size to its final size, anchored at a transform-origin point.
Element appears with a brief overshoot past its target size, then settles. Conveys emphasis through elastic energy.
Element is uncovered by a moving mask or clip-path, creating a wipe effect (left-to-right, top-to-bottom, etc.).
Element transitions from fully opaque to transparent, signaling departure or dismissal.
Coordinating multiple animations: when each starts, how long it runs, and in what order.
The waypoints that define an animation's start, end, and intermediate states. CSS @keyframes lists percentages of progress.
Multiple elements animate in sequence with a small delay between each, so the eye reads them one after another.
How long an animation waits before starting. Often paired with stagger to chain entrances.
How long the animation runs from start to finish. Short for snappy UI, long for cinematic motion.
Translate, scale, rotate, and skew: the spatial primitives that move elements on screen.
Move an element along X or Y axis (or Z for 3D). The most composited-friendly transform — usually GPU-accelerated.
Resize an element uniformly or per-axis. Often paired with a transform-origin to scale from a specific anchor.
Rotate an element around its transform-origin in 2D. Full 3D rotation needs perspective set on a parent.
Element rotates on X and Y axes simultaneously, simulating a physical card responding to the cursor. Requires perspective on the parent.
How state changes: crossfades, morphs, accordion-style layout shifts.
Outgoing element fades out while incoming element fades in at the same time, sharing the same position.
One shape smoothly turns into another shape (e.g. a play button expanding into a video player). Usually needs FLIP technique or shared-element transitions.
Animating a position or size change driven by the layout engine, not by a transform. Often requires measuring before and after for FLIP.
Expand-collapse transition where height (or width) animates between zero and content size, preserving layout continuity.
Animations driven by scroll position: reveal on enter, parallax, page-turn.
Element fades, slides, or transforms in when it scrolls into the viewport, using IntersectionObserver or scroll-driven CSS.
Animation whose progress is bound directly to scroll position rather than time, so it scrubs forward and backward as the user scrolls.
Layers move at different speeds during scroll, creating depth. Background moves slower than foreground.
Content scrolls continuously in a loop, usually horizontally. Common for logo walls and partner strips.
Responding to user input: hover, press, drag, shake, ripple.
Visual response to the cursor entering an element. Lift, glow, tilt, or color shifts — all common patterns.
Visual response to mousedown / touchstart, confirming the click registered before the user releases.
A short, attention-grabbing oscillation that signals error, validation failure, or a notification that needs response.
A circular wave emanates from the touch point, mimicking material feedback like a finger on water.
The shape of motion over time: ease-out feels snappy, ease-in feels reluctant, cubic-bezier fine-tunes both.
Starts fast, ends slow. The default for entrances — feels responsive because the user sees motion immediately.
Starts slow, ends fast. The default for exits — feels graceful because the eye follows the element to its resting point.
Slow at both ends, fast in the middle. Best for transitions where the start and end states should feel settled.
A four-point curve that defines the full easing shape in one go (P0=0,0 P1=x1,y1 P2=x2,y2 P3=1,1). The most flexible easing primitive.
Physics-based motion: stiffness, damping, mass, and the resulting overshoot and settle.
Physics-based motion that simulates a mass on a spring. Overshoots the target, oscillates, and settles — without manual easing tuning.
How quickly the spring accelerates toward its target. Higher stiffness = snappier motion, lower = lazier swing.
How quickly oscillation dies out. High damping = settles without overshoot, low damping = bouncy.
Overshoot past the target and snap back, like a ball hitting the floor. Implemented as a cubic-bezier or spring with low damping.
Continuous motion that never ends: marquees, pulses, idle floats.
Animation restarts from the beginning each time it reaches the end. Essential for loaders and ambient motion.
A single heart-beat-like scale or opacity oscillation, typically looped. Used for “live” indicators and skeletons.
A gradient sweep moves across a placeholder shape, signaling that content is loading.
Element drifts gently up and down or side to side, suggesting an idle ambient state.
Refinements that add craft: blur, clip-path, line drawing, typewriter.
Out-of-focus softness, often animated from full blur to sharp focus to draw the eye to a moment of clarity.
A mask that hides parts of an element outside an arbitrary shape. Animating the shape creates a wipe or reveal effect.
Path is animated from zero length to full length, making it appear to draw itself. Used for signature-style decoration or progress indication.
Text appears character by character, mimicking a typewriter or terminal output. Often paired with a blinking caret.
Animation that holds 60fps: the compositor, GPU acceleration, will-change, and reduced motion.
How many frames per second the browser can render. 60fps = 16.6ms per frame. Anything above 60 is wasted on standard displays.
The browser layer that handles transforms and opacity on the GPU without triggering layout or paint. Animations on transform/opacity are “composited” and stay smooth.
Property is promoted to its own GPU layer (via transform: translateZ(0) or will-change) so the browser can animate it without re-rasterizing the page.
The design heuristics that decide if motion helps or hurts.
Every animation should communicate something — feedback, hierarchy, or spatial relationship. Decorative-only motion on important elements distracts.
A small counter-motion before the main action. A button shrinks slightly before scaling up; a ball squashes before bouncing. Makes motion feel weighty.
The user's sense of how fast the app feels, not the actual ms. Skeletons and optimistic updates make things feel faster than they are.