CSS 缓动调节
查看 cubic-bezier 曲线并调节可用于 CSS transition 和 animation 的缓动效果。
曲线ease
拖动控制点或输入数值即可调整曲线。
当前值cubic-bezier(0.25, 0.1, 0.25, 1)
预览
元素会使用相同的缓动移动。修改数值后会重新播放预览。
CSS
可作为 CSS transition 或 animation 的 timing function 使用。
.element {
transition: transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element.is-active {
transform: translateX(120px);
}关于此工具
查看 cubic-bezier 曲线并调节可用于 CSS transition 和 animation 的缓动效果。
- 此工具在浏览器中处理。文件和输入内容不会为了处理而上传到服务器。
使用场景
- 调节 CSS transition 和 animation 使用的缓动
- 基于常用预设预览 cubic-bezier 动效
- 将调整后的值复制为 CSS 代码
常见问题
- 这个工具可以做什么？
- 查看 cubic-bezier 曲线并调节可用于 CSS transition 和 animation 的缓动效果。
- 输入内容会如何处理？
- 处理在你的浏览器中完成。文件和输入内容不会为了处理而发送到服务器。
- CSS 标准缓动预设不够吗？
- 很多时候已经够用。需要更细致地调整界面反馈或余韵时，一边预览一边调整 cubic-bezier 值会更方便。