貝塞爾曲線是一種用于控制點的數學概念，可以在平面上定義出平滑的曲線。在CSS3中，貝塞爾曲線被用來控制CSS屬性值的變化，如動畫的速度、顏色的漸變等。

/* 貝塞爾曲線的語法 */
ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier(n,n,n,n)
/* 使用貝塞爾曲線控制動畫速度的例子 */
div {
animation: example 2s cubic-bezier(0.25,0.1,0.25,1) infinite;
}
@keyframes example {
from {transform: translateX(0);}
to {transform: translateX(300px);}
}

在貝塞爾曲線的語法中，可以使用預定義的幾種速度曲線（ease、ease-in、ease-out、ease-in-out和linear），也可以使用自定義的貝塞爾曲線函數。自定義函數需要通過四個數字來描述曲線的控制點。

貝塞爾曲線的計算原理比較復雜，但可以簡化為以下幾個步驟：

1. 確定起始點和終點坐標；
2. 在起始點和終點之間插入控制點，可以有一個或多個；
3. 根據插入的控制點，計算出曲線上每個點的坐標；
4. 將每個點的坐標轉換成CSS屬性值的范圍，可以是時間軸、顏色漸變等；
5. 根據動畫的進度，計算出對應曲線上的點，從而得出對應的CSS屬性值。

上面的計算步驟中，第三步是最關鍵的，需要使用貝塞爾曲線的數學計算公式來求解。在CSS3中，可以使用函數調用系統提供的計算公式，也可以使用JavaScript代碼自己實現曲線函數并將其定義為CSS屬性值。

/* 使用JavaScript自定義貝塞爾曲線函數的例子 */
function myEasing(t) {
/* 此處為自定義的貝塞爾曲線函數 */
return t*t/(t*t + (1-t)*(1-t));
}
div {
animation: example 2s myEasing infinite;
}
@keyframes example {
from {transform: translateX(0);}
to {transform: translateX(300px);}
}