Animation Keys is a collection of essential UI animation terms that explain how motion can guide attention, provide feedback, show relationships between states, and improve the overall user experience in digital products.
This document summarizes core animation terms commonly used in UI, interaction design, and frontend implementation. It is adapted from the source page and expanded with a few practical notes, usage hints, and implementation-oriented ideas for learning and teaching.
Entrances & Exits
How elements appear and disappear.
•
Fade in / Fade out — An element appears or disappears by changing opacity.
•
Slide in — An element enters by sliding in from off-screen, such as from the left, right, top, or bottom.
•
Scale in — An element grows from smaller to full size as it appears, often paired with opacity.
•
Pop in — An element appears with a slight overshoot, creating a playful bounce-like feel.
•
Reveal — Content is uncovered gradually, often using clip-path, masks, or overflow-based animation.
•
Enter / Exit — The animation an element plays when it is mounted or removed from the screen.
Practical notes
•
Use short and subtle entrance animations for frequently repeated UI, such as dropdowns or tooltips.
•
Avoid dramatic exit animations for actions users perform often, because they can slow the interface down.
•
Good default properties for entry/exit are usually opacity and transform.
Sequencing & Timing
Coordinating multiple elements or moments.
•
Keyframes — Defined points in an animation timeline, such as 0%, 50%, and 100%.
•
Interpolation / Tween — The generation of in-between frames between a start and end value.
•
Stagger — Several items animate one after another with a small delay between them.
•
Orchestration — Coordinating multiple animations so they feel like one intentional sequence.
•
Delay — The amount of time before an animation starts.
•
Duration — How long the animation runs.
•
Fill mode — Whether an element keeps its initial or final animated styles before or after the animation completes.
•
Stepped animation — Motion divided into discrete steps instead of continuous interpolation.
Practical notes
•
Stagger is useful for lists, cards, menus, and onboarding sequences.
•
Too much delay makes interfaces feel sluggish; timing should support hierarchy, not decoration.
•
When teaching beginners, sequencing is often easier to explain through list animations than abstract theory.
Movement & Transforms
Changing an element’s position, size, or angle.
•
Translate — Moves an element along the X or Y axis.
•
Scale — Makes an element larger or smaller.
•
Rotate — Spins an element around a point.
•
Skew — Slants an element along an axis, distorting its rectangular shape.
•
3D tilt / Flip — Rotates in 3D space using transforms like rotateX or rotateY.
•
Perspective — Controls how strong the 3D depth effect appears.
•
Transform origin — Defines the anchor point a scale or rotation animates from.
•
Origin-aware animation — Motion that appears to emerge from its trigger point, such as a popover growing from the button that opened it.
Practical notes
•
Prefer transform over animating layout properties like top, left, width, or height when possible.
•
Small changes in transform origin can make the same animation feel much more natural.
•
3D transforms are powerful, but easy to overuse in product UI.
Transitions Between States
Connecting one state, view, or element to another.
•
Crossfade — One element fades out while another fades in, usually in the same visual space.
•
Continuity transition — A transition that preserves orientation by visually connecting before and after states.
•
Morph — One shape smoothly transforms into another.
•
Shared element transition — An element moves and transforms from one location or view into another, preserving identity.
•
Layout animation — Size and position changes animate smoothly instead of snapping instantly.
•
Accordion / Collapse — A section expands or collapses to reveal or hide content.
•
Direction-aware transition — Forward and backward navigation animate in opposite directions to reinforce spatial logic.
Practical notes
•
Shared element transitions are excellent for cards, galleries, media previews, and route transitions.
•
Layout animation makes interfaces feel more polished when content changes dynamically.
•
Direction-aware transitions are especially useful in step-based flows and mobile navigation.
Scroll
Motion tied to scrolling or navigating between views.
•
Scroll reveal — Elements fade, slide, or transform into place as they enter the viewport.
•
Scroll-driven animation — Animation progress is tied directly to scroll position.
•
Parallax — Background and foreground layers move at different speeds to create depth.
•
Page transition — Animation played when navigating from one page or route to another.
•
View transition — The browser or framework morphs between states or pages while preserving shared visual continuity.
Practical notes
•
Scroll reveal should support reading flow, not compete with content.
•
Heavy parallax can feel gimmicky and can hurt performance on weaker devices.
•
For practical UI work, route transitions and scroll reveals are usually more valuable than complex scroll art.
Feedback & Interaction
Responding to the user’s actions.
•
Hover effect — A visual change when the cursor moves over an element.
•
Press / Tap feedback — A subtle scale or shadow change when an element is pressed.
•
Hold to confirm — A progress-driven interaction requiring a press-and-hold gesture.
•
Drag — Moving an element by grabbing it, often with momentum on release.
•
Drag to reorder — Rearranging a list while neighboring items shift to make space.
•
Swipe to dismiss — Dragging an item off-screen to remove or close it.
•
Rubber-banding — Resistance and snap-back when dragging past a limit.
asta-nguyenUpdated 2 min read1202 views
Backend
Frontend
Frontend
AI