CSS3的貝塞爾曲線（cubic

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

我們來看圖說話：

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

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

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

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

在CSS3的動畫中，有幾個常用的固定值。

• 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 是一個強大的屬性，合理使用，我們可以做出更多酷炫的動畫。