All motion entries
MotionLang's index of 112 named motions, each with its Chinese, English and Japanese name, a one-line definition, when to use it, its parameters, a recipe, and one sentence you can hand to an AI.
112 motions · Glossary updated 2026-10-09
Entrances & Exits 8
How elements first appear on screen: how they arrive, and whether direction matters.
- Fade in淡入 The element fades from transparent to fully visible in place
- Slide in滑入 The element slides in from off-screen or one side into its final posit…
- Scale in缩放进入 The element grows from slightly smaller (about 0.9×) to full size, lik…
- Pop in弹出 The element scales up quickly from a smaller size and overshoots the t…
- Reveal揭示 A mask or clip uncovers the element bit by bit, like a curtain being p…
- Masked word reveal逐词遮罩揭示 Each word of the heading rises out of an invisible horizontal slit, on…
- Blur-up image load图片模糊聚拢 The image starts as a blurred block of colour, slightly enlarged, then…
- Preloader sequence开场加载序列 On launch you see a full-screen cover with a number counting 0 to 100 …
Sequencing & Timing 5
Who moves first, who follows, and how long each takes — the rhythm of a group.
- Keyframes关键帧 An animation split into states at a few points in time (0%, 50%, 100%)…
- Stagger错峰 Similar elements do not move together; each starts a little later than…
- Orchestration编排 Deciding which element moves first, which follows, and how long each t…
- Duration & Delay时长与延迟 Duration decides how fast a motion is; delay decides when it starts
- Stepped animation分步动画 A continuous change cut into equal parts, jumping one notch at a time …
Movement & Transforms 7
Changing an element's position, angle and orientation without changing its content.
- Translate位移 Moving the element as a whole along the X, Y or Z axis
- Rotate旋转 Spinning the element by an angle around a fixed point, often used to s…
- Skew斜切 Pushing a rectangle sideways so it becomes a parallelogram, as if a gu…
- 3D tilt3D 倾斜 The card turns slightly in 3D space following the pointer, as if light…
- Transform origin变换原点 The point that scaling and rotation pivot around
- Origin-aware animation从触发点生长 The popover grows out of the button that was clicked and returns to th…
- Drag-orbit 3D showroom拖拽环绕 3D 展厅 Drag left or right and it is not the products that move — you orbit th…
Transitions Between States 12
How content turns from state A into state B within the same view.
- Crossfade交叉淡化 The old content fades out while the new content fades in, overlapping …
- Morph形变 The same object changes shape, size or corner radius and continuously …
- Shared element transition共享元素转场 A thumbnail flies to a new position and enlarges as the detail view op…
- Layout animation布局动画 When items are added, removed or reordered, the rest shift smoothly ou…
- Accordion手风琴折叠 As a section expands or collapses, its height changes smoothly and the…
- Direction-aware transition有方向感的转场 Going forward the new view enters from the right; going back it enters…
- Pixel dissolve像素溶解 The next image does not fade in; it grows in cell by cell
- Shape overlay transition形状蒙版转场 Tap once and several coloured bands sweep up across the whole screen, …
- Card unfurl to fullscreen卡片撑满全屏 Tap a rounded card and it grows, corners and all, until it fills the s…
- Scroll-anchored page flip整页掀起转场 Going to the next page, the current one is lifted and turned away from…
- Circle-origin reveal原点圆形扩散 Tap the icon and the whole layer does not fade in or slide from an edg…
- Shader image transition着色器图像过渡 The switch between two images is not a crossfade: the picture is pushe…
Scroll 13
Motion tied to scrolling: where and how fast you scroll decides what moves.
- Scroll reveal滚动进入 Elements play their entrance only when they scroll into view, so conte…
- Scroll-driven animation滚动驱动 The animation's progress is bound directly to scroll position, so scro…
- Parallax视差 The background moves more slowly than the foreground, creating a sense…
- View transition视图转场 The browser snapshots the view before and after a change and automatic…
- Reading progress阅读进度 A hairline at the top fills as you scroll, and a rail of ticks says ho…
- Smooth scrolling平滑滚动接管 Wheel once and the content does not jump to follow — it catches up wit…
- Direction-aware nav hide按滚动方向收纳导航 As you read downward the top bar slides away and gives the screen back…
- Horizontal scroll section横向滚动区段 You scroll down but this section moves sideways: a row of product card…
- Scroll word illumination滚动逐词点亮 A paragraph sits greyed out
- Scroll quantized focus blur滚动分档失焦 A block of text is pinned on screen; whichever paragraph you are on is…
- Assemble from scatter从散落聚拢 A row of cards starts scattered — each pushed in its own direction and…
- Scroll-scrubbed playback滚动推播放头 An animation that would normally play on its own no longer does: scrol…
- Scroll frame sequence滚动逐帧序列 It looks like video but is a stack of pre-rendered stills (36 real pro…
Feedback & Interaction 15
The immediate response after a user action, confirming that it registered.
- Hover effect悬停反馈 When the pointer moves over a clickable element, it shifts colour or b…
- Press feedback按压反馈 The element shrinks or darkens slightly while pressed, so the finger f…
- Hold to confirm长按确认 The user holds without releasing while a progress ring fills; the acti…
- Drag拖拽 The element follows the pointer, with the distance entirely up to the …
- Drag to reorder拖拽排序 Hold an item and drag it elsewhere; the others make room in real time,…
- Swipe to dismiss滑动关闭 Swipe an item sideways to push it away; past a certain distance or spe…
- Rubber-banding橡皮筋回弹 Past the boundary you can still pull a little, but it gets harder the …
- Shake抖动 The element jitters left and right a few times, making it clear that s…
- Ripple涟漪 A fading circle spreads out from the point of the tap, drawing the fac…
- Sticker peel贴纸揭角 Bring the pointer to the corner and it lifts, revealing the layer bene…
- Glare sheen高光扫过 On entry a slanted band of light sweeps across while a small patch und…
- Sibling dim on hover悬停让其它项退让 Hover one row of a list and it is the other rows that move: they dim, …
- Magnetic snap磁吸吸附 As the pointer nears the button, the button itself leans toward it as …
- Difference cursor反色跟随光标 A hand-made dot follows the pointer, always half a beat behind — it is…
- Cursor preview follow悬停预览跟随 Move the pointer across the names in a menu and a preview pops out of …
Easing 7
How speed changes over time — what makes motion feel stiff or natural.
- Easing缓动 How speed changes over time
- Ease-out缓出 Fast at the start and slowing near the end, like something pushed that…
- Ease-in缓入 Slow at first and faster as it goes, well suited to an element acceler…
- Ease-in-out缓入缓出 Slow at both ends and fast in the middle
- Linear匀速 Constant speed from start to finish with no acceleration at all, which…
- Cubic-bezier贝塞尔曲线 Four numbers describing a speed curve
- Asymmetric easing非对称缓动 Using one curve on the way out and a different one on the way back — f…
Spring 5
Motion that behaves like a real object: mass, velocity, and interruptible.
- Spring弹簧 Motion described by stiffness and damping, as if a spring were pulling…
- Bounce回弹 With lower damping, the element shoots past its target and comes back,…
- Momentum惯性 After release the element does not stop at once; it keeps gliding at t…
- Velocity速度继承 The new animation continues from the speed the element actually has ri…
- Interruptible animation可打断动画 If the user acts halfway through, the animation turns toward the new t…
Looping & Ambient 8
Animations that repeat, holding an atmosphere or signalling an ongoing state.
- Marquee跑马灯 Content scrolls across a visible strip at constant speed on a loop, of…
- Alternate (yoyo)往复循环 After playing forward the animation reverses and plays back, so there …
- Orbit环绕 One element circles around another's center, often showing a satellite…
- Pulse脉动 The element rhythmically grows and shrinks, or brightens and dims, rep…
- Float漂浮 The element drifts slowly up and down with small amplitude over a long…
- Idle animation待机动画 After the interface goes quiet, something still moves very slightly, s…
- Animated gradient渐变流动 The colour behind is never still: hues drift and brightness bleeds int…
- Liquid path morph液态路径形变 A few decorative shapes deform slowly and forever: edges bulge and hol…
Polish & Effects 11
Specific techniques that add finish, best used sparingly at one or two key spots.
- Clip-path裁剪路径 A shape decides which parts of the element are visible, cutting the re…
- Before / after slider前后对比滑块 A vertical divider splits the before and after images, and dragging it…
- Line drawing线条自绘 The line looks like it is being drawn by a pen, extending from start t…
- Text morph文字形变 When one word replaces another, the old one rises and fades out while …
- Skeleton / Shimmer骨架屏微光 Grey blocks hold the layout while loading and a sheen sweeps slowly ac…
- Number ticker数字滚动 The number rolls quickly from the old value to the new one instead of …
- Typewriter打字机 Text appears one character at a time as if someone were typing it live…
- Text scramble文字乱码解码 A line of garbage characters flickers rapidly and then locks into the …
- Dual-copy colour wipe双色刷色 The colour of a line is brushed across: the new colour is pushed in fr…
- Variable font proximity可变字重跟随 As the pointer sweeps a line, the characters nearest it get heavier an…
- Noise lens reveal圆形噪点透镜 As the pointer moves across the picture, a soft-edged, grainy circle f…
Principles 4
The underlying rules behind good motion, plus the lines you should not cross.
- Anticipation预备动作 A small move in the opposite direction before the real one, like crouc…
- Follow-through跟随与余势 After the main body stops, attached parts keep moving briefly before t…
- Squash & stretch挤压与拉伸 Squashing and stretching the element as it moves, imitating how a spri…
- Reduced motion减弱动效 Users who have turned on reduced motion in their system should get fad…
Text Effects 5
The words themselves move: how letters drop, how a band of light sweeps across them. Not what the text says — the letterforms are what animates.
- Gravity drop文字坠落 Each character drops from above, bounces twice, squashes on impact and…
- Shine sweep文字光泽 A band of light travels across the text like a reflection on metal
- Text on a path环绕文字 The text is pinned to a curve instead of a line: a seal rotates, and a…
- Text flip翻转文字 One word tips forward, the next stands up from behind, and for an inst…
- Wave text波浪文字 Every character rides a sine wave with a shifted phase, so one wave tr…
Cursor & Pointer 4
The interface answers before any click: where the pointer passes or rests decides what the page does.
- Cursor trail光标拖尾 Behind the pointer a chain of items drops, shrinks and fades — product…
- Pointer spotlight指针聚光 A light follows the pointer, brightening what is near and lighting the…
- Proximity magnify邻近放大 Whichever item the pointer nears grows and lifts, with neighbours scal…
- Lock-on reticle锁定准星 The pointer becomes four corner brackets; over anything pressable they…
Atmosphere & Background 5
Motion that fills the whole background and never quite settles. Nothing in particular moves — the air of the page does.
- Aurora veil极光渐变 A few large soft colours drift inside with permanently blurred edges, …
- Drifting particles粒子漂浮 A layer of small specks drifts through the frame: near ones large and …
- Running border描边流光 A short segment of light runs around the card's edge with a blurred ta…
- Reactive grid网格感应 An even dot grid covers the background; the dots near the pointer brig…
- Film grain胶片颗粒 A fine layer of noise sits over the photo and changes every frame, so …
Liquid & Organic 3
Droplets that pull together, merge and part again. The shape finds its own balance and every edge stays soft.
- Metaball融球 Small satellites orbit a core; as one comes close a bridge grows betwe…
- Fluid orb流体球 A glass orb with layers of colour crossing and flowing inside it, its …
- Liquid indicator液态指示器 The selected pill stretches as it travels, then settles, staying conne…