• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • transition-timing-function

    版本:CSS3

    CSS属性受到transition effect的影响,会产生不断变化的中间值,而CSStransition-timing-function属性用来描述这个中间值是怎样计算的。实质上,通过这个函数会建立一条加速度曲线,因此在整个transition变化过程中,变化速度可以不断改变。

    这条加速度曲线被<timing-function>所定义,之后作用到每个CSS属性的过渡.

    你可以规定多个timing function,通过使用transition-property属性,可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少,缺少的值被设置为初始值(ease)。如果timing function比主列表要多,timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。

    示例

    transition-timing-function: ease
    transition-timing-function: ease-in
    transition-timing-function: ease-out
    transition-timing-function: ease-in-out
    transition-timing-function: linear
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
    transition-timing-function: step-start
    transition-timing-function: step-end
    transition-timing-function: steps(4, end)
    
    transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
    
    transition-timing-function: inherit
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上浏览器都支持transition-timing-function

    语法

    transition-timing-function:<timing-function>

    取值

    • linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    • ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    • ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
    • ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
    • ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
    • step-start:等同于 steps(1, start)
    • step-end:等同于 steps(1, end)steps(<integer>[,[ start | end ]]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是startend,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end
    • cubic-bezier(<number>,<number>,<number>,<number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

    说明:

    检索或设置对象中过渡的动画类型。

    • 如果提供多个属性值,以逗号进行分隔。
    • 对应的脚本特性为transitionTimingFunction

    这是一个实验中的功能
    此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

    默认值ease
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体交互

    例子

    transition-timing-function: ease

     <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease;
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease;
    }
    
    
    //JS
    
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-timing-function: ease-in

     
    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
         -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in;
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in;
    }
    
    //JS
    
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-timing-function: ease-out

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-out;
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-out;
    }
    
    //CSS
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-timing-function: ease-in-out

     <div class="parent">
      <div class="box">lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in-out;
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: ease-in-out;
    }
    
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-timing-function: linear

     <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: linear;
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: linear;
    }
    
    
    //CSS
    
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-timing-function: step-start

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-start;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-start;
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-start;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-start;
    }
    
    //CSS
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-timing-function: step-end

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-end;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-end;
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: step-end;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: step-end;
    }
    
    //JS
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-timing-function: steps(4, end)

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: steps(4, end);
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: steps(4, end);
    }
    .box1{
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: steps(4, end);
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-timing-function: steps(4, end);
    }
    
    //JS
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    
    transition-timing-function:linear;
    -webkit-transition-timing-function:linear;/*safari and chrome*/
    

    2、为了更好地理解不同的函数值:这里有五个不同的div元素,用5个不同的值:

    实例

    #div1{transition-timing-function:linear;}
    #div2{transition-timing-function:ease;}
    #div3{transition-timing-function:ease-in;}
    #div4{transition-timing-function:ease-out;}
    #div5{transition-timing-function:ease-in-out;}
    /*safari*/
    #div1{-webkit-transition-timing-function:linear;}
    #div2{-webkit-transition-timing-function:ease;}
    #div3{-webkit-transition-timing-function:ease-in;}
    #div4{-webkit-transition-timing-function:ease-out;}
    #div5{-webkit-transition-timing-function:ease-in-out;}
    

    3、和上面的例子一样,但指定速度曲线立方贝塞尔曲线函数:

    实例

    #div1{transition-timing-function:cubic-bezier(0,0,1,1;}
    #div2{transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
    #div3{transition-timing-function:cubic-bezier(0.42,0,1,1);}
    #div4{transition-timing-function:cubic-bezier(0,0,0.58,1);}
    #div5{transition-timing-function:cubic-bezier(0.42,0,0.58,1);}
    /*safari*/
    #div1{-webkit-transition-timing-function:cubic-bezier(0,0,1,1;}
    #div2{-webkit-transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
    #div3{-webkit-transition-timing-function:cubic-bezier(0.42,0,1,1);}
    #div4{-webkit-transition-timing-function:cubic-bezier(0,0,0.58,1);}
    #div5{-webkit-transition-timing-function:cubic-bezier(0.42,0,0.58,1);}