CSS中，關(guān)于動(dòng)畫(huà)效果很多時(shí)候會(huì)使用到貝塞爾曲線函數(shù)。貝塞爾曲線是一種用于數(shù)學(xué)描述二維平面內(nèi)曲線的數(shù)學(xué)方法，同時(shí)也是CSS中定義動(dòng)畫(huà)的關(guān)鍵之一。
在CSS中，使用貝塞爾曲線非常簡(jiǎn)單。只需要在animation或者transition這些屬性中，使用cubic-bezier()函數(shù)將具體的貝塞爾曲線參數(shù)傳遞即可。
cubic-bezier()函數(shù)的參數(shù)是4個(gè)，分別表示曲線上2個(gè)控制點(diǎn)的坐標(biāo)位置。其中前兩個(gè)參數(shù)表示第一個(gè)控制點(diǎn)，后兩個(gè)參數(shù)表示第二個(gè)控制點(diǎn)。這些參數(shù)的取值范圍是0-1，因?yàn)樨惾麪柷€是定義在0-1之內(nèi)的。參數(shù)順序?yàn)閤1,y1,x2,y2。
下面是一個(gè)例子：

<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.box:hover {
transform: translateX(100px) translateY(100px);
}
</style>
<div class="box"></div>

在上面的例子中，我們定義了一個(gè)在鼠標(biāo)懸停時(shí)執(zhí)行的動(dòng)畫(huà)，將一個(gè)紅色的正方形元素向右下移動(dòng)，移動(dòng)距離為100px。通過(guò)transition屬性，我們?yōu)樵囟x了一個(gè)transform屬性的1秒過(guò)渡動(dòng)畫(huà)，貝塞爾曲線參數(shù)為cubic-bezier(0.785，0.135，0.15，0.86)。
這個(gè)貝塞爾曲線的效果是一個(gè)彈性強(qiáng)的反彈曲線，它能夠使得元素動(dòng)畫(huà)呈現(xiàn)出反彈的效果。在實(shí)際使用中，調(diào)整參數(shù)可以實(shí)現(xiàn)不同的曲線效果，進(jìn)而實(shí)現(xiàn)不同的動(dòng)畫(huà)效果。