貝塞爾曲線

緩動函數(shù)有三種類型：1. 線性，2. 三次貝塞爾，3. 階躍

貝塞爾曲線

貝塞爾曲線（讀作 [bezje]）是一種使用數(shù)學(xué)方法描述的曲線，被廣泛用于計算機圖形學(xué)和動畫中。在矢量圖中，貝塞爾曲線用于定義可無限放大的光滑曲線。

貝塞爾曲線由至少兩個控制點進(jìn)行描述。Web 技術(shù)中使用的是三次貝塞爾曲線，即使用四個控制點 P0、P1、P2 和 P3 描述的曲線。

在繪制二次貝塞爾曲線的過程中，需要先作兩條輔助線：P0 到 P1 和 P1 到 P2；第三條輔助線從其起點穩(wěn)步移動到第一輔助線上，終點在第二輔助線上。在這條輔助線上，有一個點從其起點穩(wěn)步移動到其終點。這個點描述的曲線就是貝塞爾曲線。以下是一個動畫示例，展示了曲線的創(chuàng)建過程：

CSS 中的貝塞爾緩動函數(shù)

ease

表示插值緩慢開始，陡然加速，再逐漸減速至結(jié)束。此關(guān)鍵字表示緩動函數(shù) cubic-bezier(0.25, 0.1, 0.25, 1.0)。其與 ease-in-out 相似，但在開始時加速更陡。

ease-in

表示插值緩慢開始，再逐漸加速至結(jié)束，最終突然停止。此關(guān)鍵字表示緩動函數(shù) cubic-bezier(0.42, 0.0, 1.0, 1.0)。

ease-out

表示插值突然開始，再逐漸減速至結(jié)束。此關(guān)鍵字表示緩動函數(shù) cubic-bezier(0.0, 0.0, 0.58, 1.0)。

ease-in-out

表示插值緩慢開始，然后加速，再減速至結(jié)束。此關(guān)鍵字表示緩動函數(shù) cubic-bezier(0.42, 0.0, 0.58, 1.0)。在開始時，此關(guān)鍵字表現(xiàn)同 ease-in 關(guān)鍵字；在結(jié)束時，表現(xiàn)同 ease-out 關(guān)鍵字。

.container {  position: relative;  height: 100px;}.box {  position: absolute;  width: 50px;  height: 50px;  background-color: blue;  background-image: radial-gradient(circle at 10px 10px,rgba(25, 255, 255, 0.8),rgba(25, 255, 255, 0.4));  border-radius: 50%;  top: 25px;  animation: move-right 1.5s infinite alternate ease-in-out;}@keyframes move-right {  from {    left: 10%;  }  to {    left: 90%;  }}

如下圖：

階躍緩動函數(shù)

函數(shù) steps() 定義了將輸出值域分為等距步長的階躍函數(shù)。此類階躍函數(shù)有時也稱為階梯函數(shù)。

.container {  position: relative;  height: 100px;}.box {  position: absolute;  width: 50px;  height: 50px;  background-color: blue;  background-image: radial-gradient(circle at 10px 10px,rgba(25, 255, 255, 0.8),rgba(25, 255, 255, 0.4));  border-radius: 50%;  top: 25px;  animation: move-right 1.5s infinite alternate steps(5, jump-start);}@keyframes move-right {  from {    left: 10%;  }  to {    left: 90%;  }}

如下圖：