easingEasing
缓动English definition
An easing function maps linear timeline progress to a changing rate of property interpolation.
Chinese translation
动画加速或减速的速率变化方式。
easingEasing
Compare common easing curves and custom cubic-bezier velocity profiles.
Preview
An easing function maps linear timeline progress to a changing rate of property interpolation.
FullReduced
FullReduced
Preview
Implement Easing: Compare common easing curves and custom cubic-bezier velocity profiles. Use Demo duration 520ms, Distance 120px, Easing ease-out. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--easing, and mount the provided vanilla JavaScript interaction runtime. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.
<div class="motion-demo motion-demo--easing" data-motion="easing" aria-label="Easing demo">
<div class="motion-pausable-scene">
<div class="motion-dot" role="img" aria-label="Easing"></div>
<div class="motion-action-row"><button class="motion-pause-button" type="button" data-motion-pause data-pause-label="Pause motion" data-resume-label="Resume motion" aria-pressed="false" aria-disabled="true" disabled><span data-motion-pause-label>Pause motion</span></button></div>
</div>
</div>.motion-demo.motion-demo--easing {
box-sizing: border-box;
position: relative;
display: grid;
place-items: center;
width: min(100%, 34rem);
min-height: 15rem;
padding: 2rem;
overflow: hidden;
color: #18181b;
background: #fafafa;
border: 1px solid #e4e4e7;
border-radius: 16px;
isolation: isolate;
}
.motion-demo.motion-demo--easing *, .motion-demo.motion-demo--easing *::before, .motion-demo.motion-demo--easing *::after {
box-sizing: border-box;
}
.motion-demo.motion-demo--easing .motion-surface {
position: relative;
display: grid;
gap: 0.65rem;
width: min(100%, 18rem);
padding: 1.25rem;
background: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 16px;
box-shadow: none;
}
.motion-demo.motion-demo--easing .motion-surface strong { font-weight: 500; }
.motion-demo.motion-demo--easing .motion-line {
display: block;
width: 100%;
height: 0.5rem;
background: #e4e4e7;
border-radius: 999px;
}
.motion-demo.motion-demo--easing .motion-line:last-child { width: 62%; }
.motion-demo.motion-demo--easing .motion-button {
position: relative;
min-height: 2.75rem;
padding: 0.75rem 1.1rem;
color: white;
font: inherit;
font-weight: 700;
background: #18181b;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.motion-demo.motion-demo--easing .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }
.motion-demo.motion-demo--easing .motion-action-row {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.85rem;
}
.motion-demo.motion-demo--easing .motion-replay-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--easing .motion-pausable-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--easing button.motion-surface {
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.motion-demo.motion-demo--easing .motion-replay-button,
.motion-demo.motion-demo--easing .motion-undo-button,
.motion-demo.motion-demo--easing .motion-dismiss-button,
.motion-demo.motion-demo--easing .motion-pause-button {
min-height: 2.75rem;
padding: 0.65rem 0.9rem;
color: #18181b;
font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
background: #ffffff;
border: 1px solid #d4d4d8;
border-radius: 8px;
cursor: pointer;
}
.motion-demo.motion-demo--easing .motion-replay-button:focus-visible,
.motion-demo.motion-demo--easing .motion-undo-button:focus-visible,
.motion-demo.motion-demo--easing .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--easing .motion-pause-button:focus-visible,
.motion-demo.motion-demo--easing [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--easing [data-swipe-target]:focus-visible {
outline: 3px solid rgb(37 99 235 / 32%);
outline-offset: 3px;
}
.motion-demo.motion-demo--easing .motion-status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.motion-demo.motion-demo--easing .motion-ripple-ink {
position: absolute;
width: 12px;
height: 12px;
pointer-events: none;
background: rgb(255 255 255 / 72%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.95);
opacity: 0;
}
.motion-demo.motion-demo--easing .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--easing .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; }
.motion-demo.motion-demo--easing .motion-state--to { background: #18181b; color: white; }
.motion-demo.motion-demo--easing .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--easing .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--easing .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--easing svg { width: min(100%, 20rem); height: auto; }
.motion-demo.motion-demo--easing .motion-dot { width: 2rem; height: 2rem; background: #2563eb; border-radius: 50%; animation: motion-easing 520ms cubic-bezier(0.16, 1, 0.3, 1) infinite alternate; }
@keyframes motion-easing { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
@keyframes motion-easing-reduced-fade {
from { opacity: 0.84; }
to { opacity: 1; }
}
.force-reduced-motion .motion-demo.motion-demo--easing {
animation: motion-easing-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.force-reduced-motion .motion-demo.motion-demo--easing *,
.force-reduced-motion .motion-demo.motion-demo--easing *::before,
.force-reduced-motion .motion-demo.motion-demo--easing *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.force-reduced-motion .motion-demo.motion-demo--easing .motion-button,
.force-reduced-motion .motion-demo.motion-demo--easing [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--easing [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--easing [data-spring-target] {
transform: none !important;
}
.force-reduced-motion .motion-demo.motion-demo--easing .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--easing .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--easing .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.motion-demo.motion-demo--easing {
animation: motion-easing-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.motion-demo.motion-demo--easing *, .motion-demo.motion-demo--easing *::before, .motion-demo.motion-demo--easing *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.motion-demo.motion-demo--easing .motion-button,
.motion-demo.motion-demo--easing [data-reorder-item],
.motion-demo.motion-demo--easing [data-swipe-target],
.motion-demo.motion-demo--easing [data-spring-target] {
transform: none !important;
}
.motion-demo.motion-demo--easing .motion-path { stroke-dashoffset: 0 !important; }
.motion-demo.motion-demo--easing .motion-word--from { opacity: 0 !important; visibility: hidden; }
.motion-demo.motion-demo--easing .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}(() => {
const config = {
"id": "easing",
"duration": 520,
"distance": 120,
"resistance": 65,
"position": 50,
"stiffness": 220,
"damping": 24,
"mass": 1,
"velocity": 0,
"rippleSize": 220,
"rippleOpacity": 24,
"dragScale": 103,
"autoplay": false
};
const mount = (root, config) => {
const cleanups = [];
const addCleanup = (callback) => cleanups.push(callback);
const cleanup = () => {
for (let index = cleanups.length - 1; index >= 0; index -= 1) {
try { cleanups[index](); } catch { /* keep cleanup reentrant */ }
}
cleanups.length = 0;
};
const on = (target, type, listener, options) => {
target.addEventListener(type, listener, options);
addCleanup(() => target.removeEventListener(type, listener, options));
};
const reduced = () => root.closest(".force-reduced-motion") !== null ||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const watchReduced = (callback) => {
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
const notify = () => callback(reduced());
media.addEventListener("change", notify);
const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(notify);
let ancestor = root;
while (observer && ancestor) {
observer.observe(ancestor, { attributes: true, attributeFilter: ["class"] });
ancestor = ancestor.parentElement;
}
addCleanup(() => {
media.removeEventListener("change", notify);
if (observer) observer.disconnect();
});
};
const button = root.querySelector("[data-motion-pause]");
const label = root.querySelector("[data-motion-pause-label]");
if (!button || !label) return cleanup;
button.disabled = false;
button.removeAttribute("aria-disabled");
let paused = false;
const toggle = () => {
paused = !paused;
root.getAnimations({ subtree: true }).forEach((animation) => paused ? animation.pause() : animation.play());
button.setAttribute("aria-pressed", String(paused));
label.textContent = paused
? button.dataset.resumeLabel || "Resume motion"
: button.dataset.pauseLabel || "Pause motion";
root.dispatchEvent(new CustomEvent(paused ? "motion:pause" : "motion:resume", { bubbles: true }));
};
addCleanup(() => {
root.getAnimations({ subtree: true }).forEach((animation) => {
if (animation.playState === "paused") animation.play();
});
paused = false;
button.setAttribute("aria-pressed", "false");
button.disabled = true;
button.setAttribute("aria-disabled", "true");
label.textContent = button.dataset.pauseLabel || "Pause motion";
});
on(button, "click", toggle);
return cleanup;
};
document.querySelectorAll("[data-motion=\"easing\"]").forEach((root) => {
const cleanupKey = "__motionLexiconCleanup";
if (typeof root[cleanupKey] === "function") root[cleanupKey]();
root[cleanupKey] = mount(root, config);
});
})();Learn more
Terms and distinctions
ease-outEase-out
缓出English definition
Progress advances quickly after activation and decelerates near completion, giving responsive UI motion a controlled arrival.
Chinese translation
开始快、结束慢，适合作为大多数 UI 动效和用户响应动作的默认选择。
Distinction
Ease-out is an easing profile that starts fast and ends slowly, fitting user-triggered responses.
ease-inEase-in
缓入English definition
Progress accelerates from a gentle start toward a faster finish, fitting departures that should gather speed.
Chinese translation
开始慢、结束快，通常应谨慎使用，因为容易显得迟缓。
Distinction
Ease-in is an easing profile that starts slowly and ends fast, which can make UI response feel sluggish.
ease-in-outEase-in-out
缓入缓出English definition
Progress accelerates through the middle and decelerates at both ends, supporting visible point-to-point travel.
Chinese translation
速度由慢到快再到慢，适合屏幕上已有元素从 A 点移动到 B 点。
Distinction
Ease-in-out is slow at both ends and faster in the middle, fitting movement of elements already on screen.
linearLinear
线性English definition
Timeline progress and property progress remain proportional, producing a constant rate suitable for continuous indicators.
Chinese translation
保持恒定速度，适合加载旋转器、跑马灯等持续运动。
Distinction
Linear easing keeps constant speed, fitting continuous motion such as spinners and marquees.
cubic-bezierCubic-bezier
三次贝塞尔English definition
Four control points describe a cubic Bézier timing curve for custom acceleration and deceleration.
Chinese translation
由开发者定义的自定义缓动曲线，用于精确控制速度变化。
Distinction
Cubic-bezier expresses a custom easing curve for precise acceleration and deceleration control.
asymmetric-easingAsymmetric easing
非对称缓动English definition
Different acceleration and deceleration shapes give the entrance and arrival distinct timing characteristics.
Chinese translation
加速与减速速率不同的曲线，通常比对称曲线更有生命力。
Distinction
Asymmetric easing uses different acceleration and deceleration rates; it is a custom easing strategy.
Before implementation
- Purpose
- Compare velocity curves to choose an appropriate rhythm for responses, on-screen travel, and continuous motion.
- Frequency
- Calibrate each interaction pattern before release and reuse approved curves through the design system.
- Trigger
- Trigger from curve selection or replay with equal travel and duration across options.
- Enter / exit
- Use strong ease-out for user-triggered entrances and ease-in-out for on-screen A-to-B movement.
- Interruptibility
- Carry current velocity into target changes and test interrupted CSS transitions through real interaction.
- Gesture and keyboard
- Support keyboard steps in controls and update the curve graph with the motion result.
- Reduced-motion strategy
- Keep very short state transitions and remove pronounced acceleration, deceleration, and long travel.
Accessibility
Reduced motion
Keep very short state transitions and remove pronounced acceleration, deceleration, and long travel.
Parameter reference
| Parameter | Range / options | Default | Purpose |
|---|---|---|---|
duration | 300ms–1200ms | 520ms | Uses a longer demo duration so the full change stays observable; immediate production UI feedback should stay under 300ms. |
distance | 0px–240px | 120px | Controls how far the element travels. |
ease | Ease-out / Ease-in / Ease-in-out / Linear / Custom / Asymmetric / Soft / Snap / Calm | Ease-out | Controls how velocity changes over time. |
Pre-delivery review
- Avoid ease-in for immediate UI response.
- Reserve linear curves for constant-speed motion such as spinners and marquees.