缓动曲线体系（Easing Curves）是什么：效果预览与 AI 设计提示词

效果预览

ease-out

ease-in-out

spring

linear

适合用在哪

所有项目。线性动画（linear）只留给跑马灯和加载旋转。

容易踩的坑

出场与入场共用同一条 ease-out 曲线，关闭弹窗显得拖沓不利落。
回弹曲线用于整页抽屉或模态框，大面积过冲会让用户感到晃动眩晕。
token 定义了却在组件里硬写 ease 或 300ms，改一处全站不生效。

设计提示词 · Prompt

缓动曲线体系（Easing Curves）：定义三条 motion token——enter: cubic-bezier(.22,1,.36,1)（快出慢停，所有入场）、exit: cubic-bezier(.4,0,1,1)（慢出快停，所有出场）、move: cubic-bezier(.32,.72,0,1)（标准位移，滑块/抽屉/展开）。弹性场景加 spring: cubic-bezier(.34,1.56,.64,1)（回弹，只用于小元素，大元素回弹会晕）。时长规范：微交互 100-200ms、组件过渡 250-350ms、大型动效 400-700ms，超过 1s 的任何动画都要重新审视。写进 CSS 变量（--ease-enter）全站引用。linear 只用于 loading 循环和 marquee。

Easing Curves: Define three motion tokens — enter: cubic-bezier(.22,1,.36,1) (fast out, slow stop; all entrances), exit: cubic-bezier(.4,0,1,1) (slow out, fast stop; all exits), move: cubic-bezier(.32,.72,0,1) (standard movement; sliders/drawers/expansions). For springy cases add spring: cubic-bezier(.34,1.56,.64,1) (overshoot, only for small elements — overshoot on large elements causes dizziness). Duration guidelines: micro-interactions 100-200ms, component transitions 250-350ms, large motion 400-700ms; any animation over 1s needs to be reconsidered. Write them as CSS variables (--ease-enter) referenced site-wide. linear is only for loading loops and marquees.

常见搭配

同一页面里经常和「缓动曲线体系」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

减弱动效偏好Reduced Motion 抽屉面板Drawer / Sheet 模态框Modal / Dialog 下划线动画标签Animated Underline Tabs

演示 HTML 结构

<div class="s d-easing">
  <div class="d-easing__row"><span class="d-easing__cap">ease-out</span><span class="d-easing__lane"><span class="d-easing__ball" style="--ease:cubic-bezier(.22,1,.36,1)"></span></span></div>
  <div class="d-easing__row"><span class="d-easing__cap">ease-in-out</span><span class="d-easing__lane"><span class="d-easing__ball" style="--ease:cubic-bezier(.65,0,.35,1)"></span></span></div>
  <div class="d-easing__row"><span class="d-easing__cap">spring</span><span class="d-easing__lane"><span class="d-easing__ball" style="--ease:cubic-bezier(.34,1.56,.64,1)"></span></span></div>
  <div class="d-easing__row"><span class="d-easing__cap">linear</span><span class="d-easing__lane"><span class="d-easing__ball" style="--ease:linear"></span></span></div>
</div>