过渡定时功能 | transition-timing-function

transition-timing-function

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

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

/* Keyword values */
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: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, end
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1
transition-timing-function: frames(10

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

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

初始值	ease
适用元素	all elements, ::before and ::after pseudo-elements
是否是继承属性	no
适用媒体	interactive
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

<timing-function>通过transition-property中定义被过渡属性，每个<timing-function>的值代表与这个属性相对应的timing function.

正式语法

<single-transition-timing-function>#where 
<single-transition-timing-function> = <single-timing-function>
where 
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
where 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

示例

transition-timing-function: ease

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    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;
    background-color: blue;
    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;
}

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>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    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;
    background-color: blue;
    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;
}

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>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    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;
    background-color: blue;
    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;
}

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;
    background-color: red;
    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;
    background-color: blue;
    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>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    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;
    background-color: blue;
    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;
}

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>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    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;
    background-color: blue;
    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;
}

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>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    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;
    background-color: blue;
    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;
}

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>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    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;
    background-color: blue;
    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
}

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

规范

Specification	Status	Comment
CSS TransitionsThe definition of 'transition-timing-function' in that specification.	Working Draft	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	26	(Yes)-webkit (Yes)	4.0 (2.0)-moz 16.0 (16.0)1	10	11.6-o 12.10 #	(Yes)-webkit
frames()	No support2	?	No support2	No support	No support2	?

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)-webkit	(Yes)-webkit	(Yes)-webkit (Yes)	4.0 (2.0)-moz 16.0 (16.0)1	?	?	(Yes)-webkit
frames()	?	No support2	?	No support2	No support	(Yes)	?

1. 除了支持无前缀外，Gecko 44.0（Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41）还增加了对该属性的-webkit前缀版本的支持，以解决layout.css.prefixes.webkit首选项（默认为false）的Web兼容性问题，因为Gecko 49.0（Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46），首选项默认为true。

2. frames()timing函数的名称目前正在讨论中，所以达成最终决定前，在目前的浏览器发布版本中它处于禁用状态。目前仅在Nightly / Canary中可用。