CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS @charset 規(guī)則 CSS 函數(shù)(Functions)

CSS cubic-bezier() 函數(shù)

在線示例

從開始到結束的不同速度過渡效果：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.com)</title>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

div:hover {
  width:300px;
}
</style>
</head>
<body>
<h1>cubic-bezier() 函數(shù)</h1>
<p>鼠標移動到 div 元素上，查看效果。</p>
<div></div>
<p><b>注意:</b> Internet Explorer 9 及其更早版本的瀏覽器不支持該效果。</p>
</body>
</html>

測試看看 ?/?

定義與用法

cubic-bezier() 函數(shù)定義了一個貝塞爾曲線(Cubic Bezier)。

貝塞爾曲線曲線由四個點 P0，P1，P2 和 P3 定義。P0 和 P3 是曲線的起點和終點。P0是（0,0）并且表示初始時間和初始狀態(tài)，P3是（1,1）并且表示最終時間和最終狀態(tài)。

從上圖我們需要知道的是 cubic-bezier 的取值范圍:

P0：默認值 (0, 0)
P1：動態(tài)取值 (x1, y1)
P2：動態(tài)取值 (x2, y2)
P3：默認值 (1, 1)

我們需要關注的是 P1 和 P2 兩點的取值，而其中 X 軸的取值范圍是 0 到 1，當取值超出范圍時 cubic-bezier 將失效；Y 軸的取值沒有指定，當然也毋須過大。

最直接的理解是，將以一條直線放在范圍只有 1 的坐標軸中，并從中間拿出兩個點來拉扯（X 軸的取值區(qū)間是 [0, 1]，Y 軸任意），最后形成的曲線就是動畫的速度曲線。

cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 屬性。

支持版本：CSS3

瀏覽器兼容性

表格中的數(shù)字表示支持該函數(shù)的第一個瀏覽器版本號。

函數(shù)
cubic-bezier()	4.0	10.0	4.0	3.1	10.5

CSS 語法

cubic-bezier(x1,y1,x2,y2)

值	描述
x1,y1,x2,y2	必需。數(shù)字值，x1 和 x2 需要是 0 到 1 的數(shù)字。

CSS 函數(shù)