Animation vocabulary

Pop in overshoots and settles; Scale in can stop directly at its final size.

Enter / Exit names the lifecycle motion used when an element is added or removed; Slide in is one directional implementation.

Interpolation / Tween generates frames between values; Keyframes defines state checkpoints on a timeline.

Orchestration coordinates timing across multiple animations; Keyframes describes states inside one animation.

Delay is the wait before motion starts; Duration is the time the motion spends running.

Fill mode controls which styles persist outside the active interval; Keyframes defines states inside it.

Stepped animation jumps between discrete states; regular keyframes usually interpolate continuously between states.

Scale changes an element's size; Translate changes its position.

Rotate changes an element's angle around an anchor; Translate changes its position.

Skew shears an element's shape; Translate moves it along an axis.

Perspective controls the depth of a 3D projection; Translate controls spatial position.

Transform origin anchors scale or rotation; a pure translation keeps the same path across origins.

Continuity transition is a principle for preserving before-and-after relationships; Morph is one technique that can create continuity.

Shared element transition moves and transforms the same element across layouts; Morph emphasizes one shape becoming another.

Layout animation smooths size or position changes; Morph changes an element's shape.

View transition refers to the browser connecting DOM states or page snapshots; Page transition covers route-change animation more broadly.

Drag is the general gesture of grabbing and moving an element; Drag to reorder applies it to list ordering.

Rubber-banding resists and returns after a boundary is crossed; Swipe to dismiss removes an element after a threshold.

Ease-out is an easing profile that starts fast and ends slowly, fitting user-triggered responses.

Ease-in is an easing profile that starts slowly and ends fast, which can make UI response feel sluggish.

Ease-in-out is slow at both ends and faster in the middle, fitting movement of elements already on screen.

Linear easing keeps constant speed, fitting continuous motion such as spinners and marquees.

Cubic-bezier expresses a custom easing curve for precise acceleration and deceleration control.

Asymmetric easing uses different acceleration and deceleration rates; it is a custom easing strategy.

Stiffness / Tension controls how strongly a spring pulls toward its target; it is a spring-model parameter.

Damping controls how quickly oscillation settles; Spring is the full physical model that includes damping.

Mass controls perceived weight and inertia; it works with stiffness and damping to shape a spring response.

Bounce is a spring overshooting and settling, commonly produced by lower damping with suitable stiffness.

Perceptual duration describes when a spring feels finished to the user; it differs from a fixed CSS duration.

Momentum preserves velocity after release or interruption; a spring can receive and carry that velocity.

Velocity records speed and direction; a spring can use it as the initial condition for the next response.

Interruptible animation names the ability to retarget motion smoothly in flight; a spring is one way to implement it.

Alternate reverses direction each iteration; Loop also includes normal, reverse, finite, and infinite strategies.

Pulse repeats scale or opacity changes to attract attention; Idle animation is the broader category that can include it.

Float uses continuous subtle vertical drift; Idle animation can also use pulse and other low-intensity motion.

Clip-path hides regions with a defined shape boundary; Blur softens pixels and does not define the visible region.

Mask controls visible regions through alpha or luminance and supports soft edges; Blur only softens the image.

Tabular numbers is a typographic feature that stabilizes digit width; Number ticker is the animation used when values change.

Jank is the visible stutter a user sees; Frame rate is the metric used to measure drawing speed.

Dropped frame is one missed drawing deadline; Frame rate summarizes drawing frequency over time.

will-change is an optimization hint; Compositing is the rendering stage that lets the GPU handle layers.

Layout thrashing comes from repeated layout calculation; compositor-friendly transform and opacity can avoid that work.

Follow-through happens after the main motion stops; Anticipation happens before the main motion starts.

Squash & stretch uses deformation to express weight and flexibility; Anticipation uses an opposite wind-up to preview motion.

Frequency of use determines how short and subtle motion should be; Purposeful animation determines the function it serves.

Spatial consistency preserves identity and position across states; Purposeful animation supplies the reason for that continuity.

Hardware acceleration describes using the GPU to keep motion smooth; Compositing is the rendering stage that hands independent layers to the GPU.