CSS3的貝塞爾曲線（cubic

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

我們來(lái)看圖說(shuō)話：

從上圖我們可以明確的知道 cubic-bezier 的取值范圍：

• p0：默認(rèn)值(0,0)
• p1：取值(x1,y1)
• p2：取值(x2,y2)
• p3：默認(rèn)值(1,1)

在 cubic-bezier 中，p0和p3是默認(rèn)的點(diǎn)，所以我們只需要定義p1和p2兩個(gè)點(diǎn)，同時(shí)x1、y1、x2、y2的取值范圍為[0,1]

注意：當(dāng)取值超出范圍時(shí)， cubic-bezier 就會(huì)失效。

在CSS3的動(dòng)畫(huà)中，有幾個(gè)常用的固定值。

• ease: cubic-bezier(.25, .1, .25, 1)
  
• linear: cubic-bezier(0, 0, 1, 1)
  
• 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)
  

ease: cubic-bezier(.25, .1, .25, 1)

linear: cubic-bezier(0, 0, 1, 1)

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)

附錄

英文在線工具

中文在線工具

總結(jié)：

 cubic-bezier 是一個(gè)強(qiáng)大的屬性，合理使用，我們可以做出更多酷炫的動(dòng)畫(huà)。