动画词汇表

Element appears with a slight overshoot, like it bounces into place.

The animation an element plays when it's added to or removed from the screen.

Generating all the in-between frames between a start and end value, so motion is continuous.

Deliberately timing multiple animations so they feel like one coordinated motion.

Time before an animation starts.

Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards).

An animation that is divided into discrete steps, like a countdown timer.

Make an element bigger or smaller.

Spin an element around a point.

Slant an element along the X or Y axis, shearing it out of its rectangular shape.

How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.

The anchor point a scale or rotation grows or spins from.

A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.

An element travels and transforms from one position into another, like a thumbnail expanding into a card.

When an element's size or position changes, it animates to the new spot instead of snapping.

The browser morphs between two states or pages, connecting shared elements.

Moving an element by grabbing it, often with momentum when released.

Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).

Starts fast, ends slow. The default for most UI and anything responding to the user.

Starts slow, ends fast. Usually avoided; can feel sluggish.

Slow, fast, slow. Good for elements already on screen moving from A to B.

Constant speed. Avoid for UI; reserve for spinners or marquees.

A custom easing curve you define for precise control.

A curve that accelerates and decelerates at different rates. Feels more alive than a symmetric one.

How strongly the spring pulls toward its target. Higher feels snappier.

How quickly a spring settles. Lower damping means more bounce and oscillation.

How heavy the animated element feels. More mass makes it slower and more sluggish.

A spring that overshoots and settles, adding playfulness.

How long a spring feels finished, even though it keeps micro-settling underneath.

Motion that carries velocity, especially after a drag or interruption.

How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.

An animation that can be smoothly redirected mid-flight instead of finishing first.

A loop that plays forward then reverses each iteration, instead of jumping back to the start.

A gentle repeating scale or opacity change to draw attention.

A gentle, continuous up-and-down drift that makes a static element feel alive and weightless.

Clipping an element to a shape, used for reveals, masks, and before/after sliders.

Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.

Fixed-width digits so numbers don't shift around as they change. Essential for tickers, timers, and counters.

Visible stutter when the browser drops frames because it can't keep up with the animation.

A frame the browser missed its deadline to draw, causing a tiny hitch in motion.

A CSS hint that an element is about to animate, so the browser can promote it to its own layer ahead of time.

Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank.

Parts of an element keep moving and settle slightly after the main motion stops, adding weight.

Deforming an element as it moves to convey weight, speed, and flexibility.

The more often a user sees an animation, the shorter and subtler it should be.

Animating so an element keeps its identity and position across states, so users never lose track of where things went.

Animating transform and opacity lets the GPU keep motion smooth.