CSS 缓入缓出背后的真实数字
通过拖动两个控制点来设计自定义 CSS Cubase-bezier() 计时函数，根据线性参考实时预览它，然后复制准备好的值。
处理中...
0%
结果
此页面打开三次贝塞尔曲线生成器，其中 x1=0.42、y1=0、x2=0.58、y2=1 已加载 - CSS escape-in-out 关键字扩展到的精确控制点。拖动任一手柄，或直接编辑数字，曲线、动画预览和可复制字符串都会立即更新。
ease-in-out 是五个内置 CSS 计时关键字之一，它之所以受欢迎，正是因为这条曲线从开始处缓慢加速，在中间保持相当均匀的速度，并在结束前缓慢回落——对于大多数 UI 运动来说，这种形状看起来很自然。将其视为显式控制点而不是关键字名称，原因很明显：y1 位于 0 附近，y2 位于 1 附近，两者都接近其匹配的 x，因此两个方向都没有超调。
每当您需要稍微微调感觉时，请使用这四个数字作为起点，而不是关键字本身 - 将 x1 向下拉以获得更快的开始，或将 y2 推到 1 以上以将相同的形状变成温和的超调。每次更改都会立即更新预览和可复制的cubic-bezier()线。