缓动曲线
Easing
决定动画快慢怎么分配：起步快还是收尾慢，全在这条曲线上。
- 又叫：
- 缓动函数
- 时间曲线
- 速度曲线
- 贝塞尔曲线
- timing function
- easing curve
- cubic-bezier
- 展厅
- 动效与节奏
- 形态
- 固定舞台
- 播放
- 常驻循环
- 关键词
- 纯 CSS / 新 CSS 特性 / 合成层动画 / 先查兼容
参数工作台
复制给 AI
随参数实时更新帮我调一下动效的缓动曲线：入场用 cubic-bezier(0.22, 1, 0.36, 1)，动画时长 900ms，每轮结束后停 300ms。位移幅度大概 100% 的可用宽度，用 transform 走，不要动 left/top。同一批元素（按钮、卡片）必须用同一条曲线，手感才统一；缓动只改时间分配，不要顺手把路径也改了。
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), transition-timing-function, cubic-bezier() easing curve, duration 900ms, delay 300ms, travel 100%, animate transform only (no left/top), keep one shared easing across buttons and cards, respect prefers-reduced-motion
https://publieople.github.io/design-museum/entry/easing/?stage=light
链接带着你调好的参数
什么时候用
- 想让动画有「加速度」而不是全程匀速平移
- 入场要收得干净（快进慢停），退场要果断（慢起快走）
- 排一排按钮或卡片时，让动效的手感保持一致
适用场景：按钮 / 卡片 / 页面
推荐取值
- 进场（快进慢停）
- cubic-bezier(0.22, 1, 0.36, 1)
- 退场
- cubic-bezier(0.4, 0, 1, 1)
- 标准 / 两头缓
- cubic-bezier(0.4, 0, 0.2, 1)
- 时长范围
- 150–400ms
- 回弹幅度
- 控制点 y 值 1.2–1.6，再多就油腻
别搞混
和「时长 duration」的区别
时长只管「多久走完」，缓动曲线管「时间怎么分配」。两条时长相同的动画，换一条曲线，前 100ms 里走完的路程能差好几倍。
和「过渡 transition 本身」的区别
transition 只是声明「哪个属性要动、动多久」；缓动是其中的 timing-function 参数。transition 写了 ease 不等于做了缓动，ease 只是默认曲线而已。
容易踩的坑
- 一整套界面全用默认 ease：什么都在慢慢爬，界面显得没精神
- cubic-bezier 的控制点超出 0–1 会冲出范围（也就是回弹），用得过量会像坏掉的弹簧
- 给用户主动触发的操作调缓动，别把 ease-in 放在点击反馈上，起手慢会让人觉得卡
- 缓动不改动画的物理路径，只改时间轴；位移、缩放交给 transform，别指望曲线解决布局抖动
无障碍降级
缓动只是时间分配，在 prefers-reduced-motion: reduce 下应把时长压到接近 0（或直接改成 opacity 渐变），保留状态变化、去掉速度感。
关键词
- animation-timing-function
- cubic-bezier()
- transition-timing-function
- linear()
- steps()
- easing curve