cubic-bezier() 函数

2020-03-13

cubic-bezier() 函数

ubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且 表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

鼠标移动到 div 元素上，查看效果。

 

注意: Internet Explorer 9 及其更早版本的浏览器不支持该效果。

  .box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 1s;
    transition-timing-function: cubic-bezier(0.5, 0.2, 0.2, 0.5);
    /* 这4个数平分宽度从100到300的一秒钟时间，值越小则速度越快 上面的就是 慢>快>慢  */
  }
  
  .box:hover {
    width:300px;
  }