前端代码游乐场,动效小样和实验的集中地
Easings
缓动函数可视化对照表,调动画“手感”的基础工具(有中文版)
内容更新日期 · 2026-09-07
What is it · 它是什么
什么是 Easings
Easings.net 是缓动函数(easing)的可视化速查表:一整页曲线,每条点一下就演示对应的加速减速“手感”,并直接给出对应的 CSS 代码。动画“看起来廉价”多半是缓动没调对,这张表是调手感的基础工具。
How to use · 怎么用
怎么用 Easings
- 动画做出来“不对劲”时来对照,逐条播放曲线感受差异,选出接近预期的。
- 复制它的 cubic-bezier 值进代码。
- 重点体会分工:ease-in 先慢后快适合出场、ease-out 先快后慢适合入场、elastic/bounce 类带弹性适合强调。
- 记熟常用两三条,日常就够用。
Key features · 核心特点
Easings 的核心特点
- 全部曲线可视化对照,选型不用猜
- 每条直接给 CSS/cubic-bezier 代码,复制即用
- 点击即时演示,靠“看”选而不是靠名字记
- 免费、单页、有中文版,打开就能用
