缓动函数速查表

缓动函数 自定义参数随时间变化的速率。

现实生活中,物体并不是突然启动或者停止,当然也不可能一直保持匀速移动。就像我们打开抽屉的过程那样,刚开始拉的那一下动作很快,但是当抽屉被拉出来之后我们会不自觉的放慢动作。或是掉落在地板上的物体,一开始下降的速度很快,接着就会在地板上来回反弹直到停止。

这个页面将帮助你选择正确的缓动函数。

Open Source
Help translate site to your language
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
在 CSS 中,transition 和 animation 属性允许你自定义缓动函数。
.block {
	transition: transform 0.6s ;
}
cubic-bezier.com 上编辑。
在 CSS 中,使用 @keyframes 来实现这个函数:
大小
Loading...
位移
Loading...
透明度
Loading...
PostCSS
在 PostCSS 中,使用缓动函数就变得方便多了。 可以使用这个插件 postcss-easings 来定义 transition 的属性值。
.block {
	transition: transform 0.6s ;
}
这种形式和上面的贝塞尔曲线函数一致。
糟糕,这个缓动函数不能使用 PostCSS plugin 插件。
渐变
可以使用这个工具 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 {
}
观看变化:
当前函数:
当前函数
线性函数:
线性函数