缓动函数速查表

缓动函数 自定义参数随时间变化的速率。 现实生活中,物体并不是突然启动或者停止, 当然也不可能一直保持匀速移动。就像我们 打开抽屉的过程那样,刚开始拉的那一下动作很快, 但是当抽屉被拉出来之后我们会不自觉的放慢动作。 或是掉落在地板上的物体,一开始下降的速度很快, 接着就会在地板上来回反弹直到停止。 这个页面将帮助你选择正确的缓动函数。

开源
帮助我们将此页面翻译成你的语言
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 来实现这个函数:
大小
加载中...
位置
加载中...
不透明度
加载中...
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 {
}
观看缓动变化:
当前函数:
当前函数
线性函数:
线性函数