transition-timing-function

Experimental

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

概述

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

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

你可以规定多个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
是否是继承属性否
计算值as specified
Animation typediscrete

语法

Formal syntax: 
<easing-function>#
where 
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
where 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end


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

值

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

示例

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

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

规范

Specification Status Comment
CSS Transitions
transition-timing-function		 Working Draft  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes)-webkit (en-US) 4.0 (2.0)-moz (en-US)
16.0 (16.0)		 10 11.6-o (en-US)
12.10 #		 (Yes)-webkit (en-US)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)-webkit (en-US) (Yes)-webkit (en-US) 4.0 (2.0)-moz (en-US)
16.0 (16.0)		 ? ? (Yes)-webkit (en-US)

参考