Preface
When you want an AI to help you build an animation, the biggest obstacle is often not technical, but rather a barrier of expression—having a picture in your mind but not knowing what to call it. This article compiles a standard glossary of web animation terminology. By mastering these terms, you can replace vague descriptions with precise concepts that make your ideas instantly clear to both humans and AI.
When it comes to animation, the difficult part is never writing a few lines of CSS or configuring a library; it is knowing exactly what you want and being able to describe it precisely.
Many people write requirements stating simply "make it move naturally" or "add a cool transition." Such descriptions are neither actionable nor effective for communication. In contrast, those in the know will say: "Let's use an ease-out scale-in here, combined with a staggered entrance, and do a shared element transition on switch." The latter transforms a vague feeling into a concrete, executable plan.
The glossary below is categorized by scenario and covers the vast majority of common patterns in UI animation. It is highly recommended to bookmark this guide for quick reference when defining requirements or writing prompts.
1. Entrances & Exits
How elements appear and disappear.
| Term | Description |
|---|---|
| Fade in / Fade out | Shows or hides elements by changing their opacity. |
| Slide in | Elements slide into the viewport from off-screen (left, right, top, or bottom). |
| Scale in | Elements "grow" from small to large, typically paired with a fade-in. |
| Pop in | Elements appear with a slight overshoot, as if "snapping" or "popping" into place. |
| Reveal | Content is gradually uncovered, often achieved by animating clip-path or masks. |
| Enter / Exit | The animations played when an element is added to or removed from the screen. |
2. Sequencing & Timing
How to coordinate multiple elements and timings.
| Term | Description |
|---|---|
| Keyframes | Defined points (0%, 50%, 100%) in an animation where the browser interpolates the frames in between. |
| Interpolation / Tween | Generating intermediate frames between start and end values to create continuous movement. |
| Stagger | Animating multiple elements one after another with a slight delay, creating a cascading waterfall effect. |
| Orchestration | Deliberately arranging the timing of multiple animations so they move together as a unified whole. |
| Delay | The waiting time before an animation starts. |
| Duration | How long an animation takes to complete. |
| Fill mode | Whether the element retains styles from the first or last keyframe before or after the animation runs (e.g., forwards). |
| Stepped animation | An animation split into discrete, step-by-step increments, such as a countdown timer. |
3. Movement & Transforms
Changing an element's position, scale, or rotation.
| Term | Description |
|---|---|
| Translate | Moving an element along the X or Y axis. |
| Scale | Making an element larger or smaller. |
| Rotate | Rotating an element around a specific point. |
| Skew | Slanting an element along the X or Y axis, distorting its rectangular shape. |
| 3D tilt / Flip | Rotating in 3D space (rotateX / rotateY) to add a sense of depth. |
| Perspective | The intensity of the 3D effect; smaller values create more exaggerated depth, making objects appear closer. |
| Transform origin | The anchor point around which an element scales or rotates. |
| Origin-aware animation | An animation where an element "grows" from its trigger point (e.g., a dropdown expanding from its button rather than from its own center). |
4. Transitions Between States
Connecting one state, view, or element to another.
| Term | Description |
|---|---|
| Crossfade | One element fades out while another fades in at the exact same position. |
| Continuity transition | Visually connecting the "before" and "after" states to maintain a sense of direction, like a rectangle expanding and shrinking. |
| Morph | Smoothly transforming one shape into another (e.g., Dynamic Island effects). |
| Shared element transition | An element moving and morphing from one position to another, such as a thumbnail expanding into a card. |
| Layout animation | Smoothly animating size or position changes to new layouts instead of snapping abruptly. |
| Accordion / Collapse | Smoothly expanding or collapsing the height of a section to show or hide content. |
| Direction-aware transition | Content sliding in opposite directions during forward and backward navigation to provide directional context. |
5. Scroll-Based Motion
Animations tied to scrolling or view changes.
| Term | Description |
|---|---|
| Scroll reveal | Elements fading or sliding into place as they enter the viewport. |
| Scroll-driven animation | Animations whose progress is directly tied to the scroll position. |
| Parallax | Background and foreground elements moving at different speeds during scroll, creating an illusion of depth. |
| Page transition | Animations played when navigating from one page or route to another. |
| View transition | The browser morphing and connecting shared elements between two states or pages. |
6. Feedback & Interaction
Responding to user inputs.
| Term | Description |
|---|---|
| Hover effect | Visual changes when a cursor hovers over an element. |
| Press / Tap feedback | A subtle scaling down of elements when clicked to create a tactile feel. |
| Hold to confirm | Progress filling up gradually as the user holds down a button. |
| Drag | Grabbing and moving an element, often with inertia on release. |
| Drag to reorder | Dragging list items to reorder them, with other items shifting to make space. |
| Swipe to dismiss | Dragging an element off-screen to dismiss it, such as drawers or toasts. |
| Rubber-banding | Resistance and bounce-back when dragging past boundaries, characteristic of iOS overscroll. |
| Shake / Wiggle | Rapid side-to-side movement to indicate errors or rejected inputs. |
| Ripple | A circular wave spreading from the point of touch to confirm a click. |
7. Easing
How speed changes over the duration of an animation.
| Term | Description |
|---|---|
| Easing | The acceleration and deceleration rhythm of an animation. |
| Ease-out | Fast start, slow end. The default choice for most UI and user-action response animations. |
| Ease-in | Slow start, fast end. Usually avoided in UI as it feels sluggish. |
| Ease-in-out | Slow start, fast middle, slow end. Ideal for elements moving from point A to point B on screen. |
| Linear | Constant speed. Generally avoided in UI, reserved for loaders or marquees. |
| Cubic-bezier | A custom easing curve for precise motion control. |
| Asymmetric easing | Curves with different acceleration and deceleration speeds, offering more dynamic feel than symmetric curves. |
8. Spring Animations
Physics-based motion as an alternative to fixed-duration transitions.
| Term | Description |
|---|---|
| Spring | Motion driven by tension, mass, and damping rather than fixed durations. |
| Stiffness / Tension | The force pulling the spring toward its target; higher values feel snappier. |
| Damping | The speed at which the spring settles; lower values produce more bounce and oscillation. |
| Mass | The perceived weight of an element; larger mass moves slower and feels heavier. |
| Bounce | A spring that overshoots and settles, adding playfulness. |
| Perceptual duration | The moment when a spring "feels" finished, even though the underlying math is still performing tiny adjustments. |
| Momentum | Movement carrying velocity, particularly when dragging or after being interrupted. |
| Velocity | How fast and in which direction an element is moving; when interrupted, the spring carries this velocity into the next animation. |
| Interruptible animation | Animations that can be smoothly redirected mid-motion without needing to complete first. |
9. Looping & Ambient Motion
Animations that run continuously on their own.
| Term | Description |
|---|---|
| Marquee | Text or content scrolling continuously in a loop. |
| Loop | An animation that repeats, either for a fixed count or indefinitely. |
| Alternate / yoyo | Playing forward then backward on each iteration instead of jumping back to the start. |
| Orbit | One element rotating around another along a continuous path. |
| Pulse | Subtle, repeating changes in scale or opacity to draw attention. |
| Float | Gentle, continuous up-and-down floating that makes static elements feel alive and lightweight. |
| Idle animation | Subtle motion displayed when an element is waiting for interaction. |
10. Polish & Special Effects
Subtle details that separate good animations from outstanding ones.
| Term | Description |
|---|---|
| Blur | Softening an element using a blur filter, or masking minor rendering artifacts. |
| Clip-path | Clipping an element into a specific shape for reveals, masks, or before/after sliders. |
| Mask | Hiding or showing parts of an element using a shape or gradient, similar to clip-path but with soft, faded edges. |
| Before / after slider | A draggable divider line wiped across overlapping images for comparison. |
| Line drawing | SVG paths gradually revealing themselves as if drawn by an invisible pen. |
| Text morph | Animating text character-by-character as it transitions to new values. |
| Skeleton / Shimmer | Loading placeholders with a flowing glossy light effect. |
| Number ticker | Numbers incrementing in a rolling style to reach a target value. |
| Tabular numbers | Fixed-width numerals that do not jitter horizontally when values change; essential for tickers and timers. |
| Typewriter | Text appearing character-by-character, as if being typed. |
11. Performance
What keeps animations smooth and judder-free.
| Term | Description |
|---|---|
| Frame rate / FPS | Frames rendered per second. 60 FPS is the baseline for smoothness, with newer screens supporting 120 FPS. |
| Jank | Visible stuttering when the browser falls behind and drops frames. |
| Dropped frame | When the browser misses the window to draw a frame, causing minor stuttering. |
| Compositing | Allowing the GPU to translate or fade elements on independent layers without layout recalculations or repaints. |
| will-change | A CSS hint that tells the browser an element is about to animate, allowing it to promote the element to its own layer ahead of time. |
| Layout thrashing | Animating properties like width, height, top, or left that force reflow on every frame, resulting in jank. |
12. Key Principles to Know
Concepts guiding when and how animations should be applied.
| Term | Description |
|---|---|
| Purposeful animation | Animations should serve a functional purpose—guiding attention, providing feedback, or revealing relationships—rather than being purely decorative. |
| Anticipation | A small movement in the opposite direction before the main action, hinting at what is about to happen. |
| Follow-through | Parts of an element continuing to move after the main body stops, adding a sense of weight. |
| Squash & stretch | Deforming elements during motion to convey weight, speed, and flexibility. |
| Perceived performance | Using well-timed animations to make an interface feel faster, even if the actual task loading time is unchanged. |
| Frequency of use | Animations that users see frequently should be short and highly restrained. |
| Spatial consistency | Maintaining an element's identity and relative placement between states so users don't lose track of where things went. |
| Hardware acceleration | Animating transform and opacity to keep execution offloaded to the GPU. |
| Reduced motion | Respecting the user's prefers-reduced-motion settings by weakening or disabling animations. |
Closing Thoughts
The true value of this glossary does not lie in memorizing every term, but in helping you develop a deconstructive perspective on motion: any interaction that catches your eye can be broken down into a combination of "entrance style + easing curve + sequencing/timing + finishing details."
Next time you find yourself wanting to say "make it feel more premium," try saying instead: "Let's use a scale-in with ease-out for the entrance, stagger the elements as they come in, and add a little spring feedback on hover." You'll quickly discover that a clearly articulated requirement is a requirement that actually gets built.
Comments