Easing (Timing Function) new 缓动（Timing Function） web
The speed curve of an animation — why motion feels smooth or robotic
动画的速度曲线 —— 决定动起来是顺滑还是僵硬
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Timing curve时间曲线（Timing curve）
cubic-bezier(x1, y1, x2, y2)“The S-shaped graph in the animation editor” is the timing curve itself — time runs left to right, progress bottom to top.
“动画编辑器里那条 S 形的图”就是时间曲线本身 —— 横轴是时间，从左到右；纵轴是进度，从下到上。
Prompt fragmentPrompt 片段the easing's timing curve: the cubic-bezier graph mapping time (x) to progress (y) — steep = fast, flat = slow
缓动的时间曲线：把时间（x）映射到进度（y）的 cubic-bezier 图 —— 越陡越快，越平越慢
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Fix the easing of my animation: replace linear/default timing with an explicit curve — transition-timing-function: cubic-bezier(.4, 0, .2, 1) for UI moves (fast start, soft landing), ease-out for things entering, ease-in for things leaving; keep durations 150–300ms for interface transitions and never animate at linear speed unless it's a marquee-style continuous loop.
修好我动画的缓动：把 linear/默认时间换成明确的曲线 —— UI 移动用 transition-timing-function: cubic-bezier(.4, 0, .2, 1)（起步快、落地软），进入的元素用 ease-out，离开的元素用 ease-in；界面过渡时长保持在 150–300ms，除非是 marquee 式连续滚动，否则绝不用 linear 匀速。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug the feel of my animation (CSS transition-timing-function / cubic-bezier). Rule out: no timing function set so it falls back to the default ease; linear timing making UI motion feel robotic; ease-in on an ENTERING element (arrivals want ease-out — decelerate into place); a cubic-bezier with y values outside 0–1 clipping instead of overshooting in transition shorthand order; duration so long the curve reads as lag. The symptom:
调试我动画的手感（CSS transition-timing-function / cubic-bezier）。逐项排除：没设时间函数，回落到默认 ease；linear 匀速让 UI 动效显得机械；进入中的元素用了 ease-in（进场该用 ease-out —— 减速到位）；cubic-bezier 的 y 值超出 0–1，本该过冲却在 transition 简写里被钳掉；时长太长，曲线读起来像卡顿。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | transition-timing-function | ease, ease-in, ease-out, ease-in-out, linearease、ease-in、ease-out、ease-in-out、linear |
| CSS | cubic-bezier(.4, 0, .2, 1) | a custom curve — the four numbers are the two control points自定义曲线 —— 四个数字就是两个控制点 |
| CSS | linear(…) | piecewise curves beyond beziers (springs, bounces); baseline since 2023超越贝塞尔的分段曲线（弹簧、弹跳）；2023 年起进入基线 |
| Motion | transition={{ ease: "easeInOut" }} |