• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： css 中文手册 -> css 动画过渡 -> css 过度

    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：线性过渡。等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • ease：平滑过渡。等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • ease-in：由慢到快。等同于 cubic-bezier(0.42, 0, 1.0, 1.0)
    • ease-out：由快到慢。等同于 cubic-bezier(0, 0, 0.58, 1.0)
    • ease-in-out：由慢到快再到慢。等同于 cubic-bezier(0.42, 0, 0.58, 1.0)
    • step-start：等同于 steps(1, start)
    • step-end：等同于 steps(1, 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);}

    上篇：transition-duration

    下篇：transition-delay