前言
在了解 cubic-bezier 之前，你需要對(duì) CSS3 中的動(dòng)畫效果有所認(rèn)識(shí)，它是 animation-timing-function 和 transition-timing-function 中一個(gè)重要的內(nèi)容。
本體
簡(jiǎn)介
cubic-bezier 又稱三次貝塞爾，主要是為 animation 生成速度曲線的函數(shù)，規(guī)定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。
我們可以從下圖中簡(jiǎn)要理解一下 cubic-bezier：
從上圖我們需要知道的是 cubic-bezier 的取值范圍:
- P0：默認(rèn)值 (0, 0)
- P1：動(dòng)態(tài)取值 (x1, y1)
- P2：動(dòng)態(tài)取值 (x2, y2)
- P3：默認(rèn)值 (1, 1)
我們需要關(guān)注的是 P1 和 P2 兩點(diǎn)的取值，而其中 X 軸的取值范圍是 0 到 1，當(dāng)取值超出范圍時(shí) cubic-bezier 將失效；Y 軸的取值沒有規(guī)定，當(dāng)然也毋須過(guò)大。
最直接的理解是，將以一條直線放在范圍只有 1 的坐標(biāo)軸中，并從中間拿出兩個(gè)點(diǎn)來(lái)拉扯（X 軸的取值區(qū)間是 [0, 1]，Y 軸任意），最后形成的曲線就是動(dòng)畫的速度曲線。
使用
在測(cè)試?yán)又校?/p>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.animation {
width: 50px;
height: 50px;
background-color: #ed3;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.animation:hover {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
我們可以在瀏覽器中看到，當(dāng)鼠標(biāo)移到元素上時(shí)，元素開始向右移動(dòng)，開始比較慢，之后則比較快，移開時(shí)按原曲線回到原點(diǎn)。
在例子中，當(dāng)我們不為 transition 添加 cubic-bezier 或是其他 timing-function 時(shí)，默認(rèn)的速度曲線是 ease，此時(shí)的速度曲線是：
那么讓我們?cè)诖a中加入 cubic-bezier(.17, .86, .73, .14)：
...
.animation {
...
-webkit-transition: all 2s cubic-bezier(.17, .86, .73, .14);
-o-transition: all 2s cubic-bezier(.17, .86, .73, .14);
transition: all 2s cubic-bezier(.17, .86, .73, .14);
}
...
再刷新頁(yè)面觀察效果，會(huì)看到動(dòng)畫在執(zhí)行過(guò)程中有一段很緩慢的移動(dòng)，前后的速度相似，此時(shí)的運(yùn)動(dòng)曲線是：
幾個(gè)常用的固定值對(duì)應(yīng)的 cubic-bezier 值以及速度曲線
-
ease：cubic-bezier(.25, .1, .25, 1)
-
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
-
ease-in：cubic-bezier(.42, 0, 1, 1)
-
ease-out：cubic-bezier(0, 0, .58, 1)
-
ease-in-out：cubic-bezier(.42, 0, .58, 1)
-
In Out . Back（來(lái)回的緩沖效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)
自己調(diào)效果 網(wǎng)址：http:///#.17,.67,.83,.67
|
