CSS cubic-bezier()函数

• 

  定义和用法

  cubic-bezier()函数定义了Cubic Bezier曲线。Cubic Bezier曲线由四个点P0，P1，P2和P3定义。P0和P3是曲线的起点和终点，在CSS中，这些点是固定的，因为坐标是比率。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

  cubic-bezier()函数可以与animation-timing-function属性和transition-timing-function属性一起使用。

  特征	说明
  CSS版本	CSS3

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  函数	IE/Edge	Chrome	FireFox	Safari	Opera
  函数名称
  cubic-bezier()	10.0	4.0	4.0	3.1	10.5

• 

  CSS语法

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

  值	描述
  x1,y1,x2,y2	必需的。 数值。 x1和x2必须是0到1之间的数字

• 

  实例

  从开始到结束的可变速度的过渡效果：

  div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  }
  

  尝试一下