📈
缓动函数预览
对比常用 ease/cubic-bezier 缓动曲线的动画效果，复制对应 CSS。
本地处理 · 不上传
加载工具中…
相关：缓动 · easing · 动画 · cubic-bezier · 过渡
缓动函数预览把常见的缓动曲线并排展示并同步播放，直观对比 ease-in、ease-out、回弹等效果的差别，选定后直接复制取值。
使用步骤
- 播放对比所有缓动效果
- 选中感兴趣的曲线
- 查看曲线形状与取值
- 复制到项目中使用
使用场景
- 为动画挑选合适的节奏感
- 对比不同缓动的实际差异
- 建立团队的动效规范
- 理解缓动函数的命名含义
小贴士
- ease-out 用于元素进场、ease-in 用于退场，这是被广泛采用的惯例——用户的注意力应跟随元素的到达而非离开。
- linear 只适合无限循环的匀速运动（如加载转圈），用在界面过渡上会显得机械。
- 回弹类缓动很吸睛但也很快让人厌烦，应该只用在需要强调的少数交互上。
常见问题
ease-in 和 ease-out 哪个用在进场？
进场用 ease-out（先快后慢）。元素快速出现再平稳落位，符合物理直觉；用 ease-in 会显得元素启动迟缓，反应像是卡了一下。
什么时候用 linear？
匀速的持续运动，比如加载指示器的旋转、进度条的匀速推进。任何有起点终点的界面过渡都不该用它。
自定义曲线怎么做？
用 cubic-bezier() 指定四个控制参数，或用可视化工具拖拽生成。更复杂的多段缓动可以用较新的 linear() 函数分段定义。
缓动函数预览是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用缓动函数预览，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。