Animation vocabulary
Describe motion. 12 hand-written terms with real workplace examples.
Learn animation terms every day.
One hand-written term. A real workplace example. Thirty seconds before your day gets loud.
Fade In
An element appears by going from fully transparent to fully visible. It is the simplest entrance animation and rarely feels wrong.
Stagger
Multiple elements animate one after another with a small delay between each. It makes a list feel like it is arriving in sequence, not all at once.
Duration
How long an animation takes from start to finish. Short durations (100 to 200ms) feel snappy. Longer ones (300 to 500ms) feel more deliberate.
Easing
How an animation speeds up or slows down over its duration. Two animations can travel the same distance in the same time but feel completely different based on easing alone.
Ease-Out
An animation that starts fast and slows down to a stop. It is the default choice for almost all UI elements because it feels confident and natural.
Spring
Motion driven by physics (tension, mass, damping) instead of a fixed duration. Springs handle interruptions naturally and feel more alive than timed easing curves.
Shared Element Transition
An element moves and transforms from one position to another across two different screens or states. It keeps the user oriented during navigation.
Reduced Motion
A system setting that signals the user wants less movement. Replace large animations with simple opacity changes when this setting is on.
Press Feedback
A subtle scale-down when an element is tapped or clicked. It makes the interaction feel physical and confirms the tap was registered.
Skeleton Screen
A placeholder showing the rough shape of content while it loads, with a shimmer sweeping across it. It feels faster than a blank screen or spinner.
Scroll Animation
An animation triggered by or tied to scroll position. Elements can fade in as they enter the viewport, or move in sync with how far the user has scrolled.
Perceived Performance
How fast an interface feels to the user, regardless of actual load times. Good animation can make a slow operation feel faster than it really is.
Building toward a role? Browse career pathways that map terms to jobs.