缓动函数速查表
缓动函数 自定义参数随时间变化的速率。 现实生活中，物体并不是突然启动或者停止， 当然也不可能一直保持匀速移动。就像我们 打开抽屉的过程那样，刚开始拉的那一下动作很快， 但是当抽屉被拉出来之后我们会不自觉的放慢动作。 或是掉落在地板上的物体，一开始下降的速度很快， 接着就会在地板上来回反弹直到停止。 这个页面将帮助你选择正确的缓动函数。
开源
帮助我们将此页面翻译成你的语言
x
t
CSS
在 CSS 中，transition 和 animation 属性允许你自定义缓动函数。
.block { transition: transform 0.6s ; }
在 cubic-bezier.com 上编辑。
在 CSS 中，使用
@keyframes 来实现这个函数:大小
加载中...
位置
加载中...
不透明度
加载中...
PostCSS
在 PostCSS 中，使用缓动函数就变得方便多了。 可以使用这个插件 postcss-easings 来定义 transition 的属性值。
.block { transition: transform 0.6s ; }
这种形式和上面的贝塞尔曲线函数一致。
可惜的是，这个缓动函数不能使用 PostCSS plugin 插件。 但可以用
@keyframes 实现，查阅上方。渐变
可以使用工具 postcss-easing-gradients 来实现渐变。
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
函数
下面的代码由 TypeScript 实现。 变量 x 表示 0（动画开始）到 1（动画结束）范围内的值。
function (x: number): number {
}下面的代码由 TypeScript 实现。 变量 x 表示 0（动画开始）到 1（动画结束）范围内的值。
function (x: number): number {
}观看缓动变化:
当前函数:
当前函数
线性函数:
线性函数