Loading...
Loading...
拖动两个控制点调整 CSS 缓动曲线,带实时预览。
CSS 动画好不好看,几乎全看缓动。cubic-bezier() 用四个数字控制缓动,但这四个数字很难凭空想象。这个编辑器让你用手把曲线捏出来,并实时看到效果。
拖动两个控制点,在起点和终点之间弯曲这条曲线。cubic-bezier() 的值实时更新,还有一个方块用你的曲线在屏幕上滑过,让你直接感受节奏。纵轴可以超出 0 和 1,于是你能做出回弹、预备这类过冲效果(比如温和的 back-out)。预设涵盖标准关键字外加几条有表现力的曲线。一切都在浏览器里运行,直接把值复制进你的 CSS transition 或 animation。
移动两个控制手柄,曲线和数值实时更新。
一个方块用你的曲线滑过屏幕,可随时重播。
纵轴可超出 0–1,能做出 back-out、类弹跳的曲线。
ease、ease-in、ease-out、ease-in-out、linear,外加几条有表现力的曲线。
复制 cubic-bezier() 值,或整行 transition-timing-function。
无账号、不上传;编辑器和预览都在本地运行。
想要灵动的界面,把第二个手柄稍微拉到 1 以上加一点过冲,再缓缓落回。
先选一个接近目标的预设。
拖动蓝色和青色控制点细调曲线。
点「播放」在预览上感受节奏。
把 cubic-bezier() 值复制进你的 CSS。
把 transition-timing-function 设成贴合你动效的曲线。
把曲线用作 animation-timing-function,做出自定义手感。
定义一条统一的缓动曲线,到处复用。
看清楚控制点如何决定动画的加速方式。
曲线是一条 SVG 三次贝塞尔路径,控制点由你拖动;同样的四个值驱动预览方块上的 CSS 动画,所以你看到的就是浏览器将渲染的。
没有账号、没有网络请求,一切都在本地计算。
拖动只更新一小段 SVG 和一个 CSS 值,所以很流畅;预览用原生 CSS 动画。