緩動函數 (Easing function) 小抄
緩動函數 (Easing function) 能夠調整數值變化的速度。
現實生活中的物體不會以等速移動，也不會突然開始或停止。例如我們打開抽屜時，首先會加速， 然後慢下來。又或是當某個物體由高處往下掉時，首先是越掉越快，撞到地上彈回，最後才又回到地板。
本頁可以在每次你需要時，幫助你找到想要的函數。
開源
幫助我們將此網頁翻譯成您的語言
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 {
}查看變化:
此函數:
此函數
線性函數:
線性函數