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 type | discrete |
语法
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 |
浏览器兼容性
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) |