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);
    }
    
    尝试一下