缓动函数速查表

缓动函数 通过时间的变化控制参数值变化的速率。

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

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

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
	);
}
Math function
Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation).
function (x: number): number {
}
Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation).
function (x: number): number {
}
观看变化:
当前函数:
当前函数
线性函数:
线性函数