transition-timing-function

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

概述

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

这条加速度曲线被<timing-function> (en-US)所定义,之后作用到每个 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: 
transition-timing-function = 
<easing-function>#

<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<linear-easing-function> =
linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )

<linear-stop-list> =
[ <linear-stop> ]#

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

<linear-stop> =
<number> &&
<linear-stop-length>?

<linear-stop-length> =
<percentage>{1,2}

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> (en-US)的值代表与这个属性相对应的 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
Unknown specification
# transition-timing-function-property

浏览器兼容性

BCD tables only load in the browser

参考