緩動函數 (Easing function) 小抄

緩動函數 (Easing function) 能夠調整數值變化的速度。

現實生活中的物體不會以等速移動,也不會突然開始或停止。例如我們打開抽屜時,首先會加速, 然後慢下來。又或是當某個物體由高處往下掉時,首先是越掉越快,撞到地上彈回,最後才又回到地板。

本頁可以在每次你需要時,幫助你找到想要的函數。

開源
幫助我們將此網頁翻譯成您的語言
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 能夠將這個網頁的函數名稱轉換為貝茲曲線數值,您只需要輸入名稱就好了。
.block {
	transition: transform 0.6s ;
}
等同於 CSS 的程式碼。
很不幸的,這個函數不能透過 PostCSS 插件設定。請使用上方的 @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 {
}
查看變化:
此函數:
此函數
線性函數:
線性函數