transition-timing-function
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
概述
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 属性都是有效的。
语法
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, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);
/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;
值
<timing-function>
-
通过
transition-property
中定义被过渡属性,每个<timing-function>
的值代表与这个属性相对应的 timing function.
形式定义
形式语法
transition-timing-function =
<easing-function>#
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear |
<linear()>
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>
<step-easing-function> =
step-start |
step-end |
<steps()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
示例
三次方贝塞尔曲线示例
css
.ease {
transition-timing-function: ease;
}
.easein {
transition-timing-function: ease-in;
}
.easeout {
transition-timing-function: ease-out;
}
.easeinout {
transition-timing-function: ease-in-out;
}
.linear {
transition-timing-function: linear;
}
.cb {
transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}
step 示例
css
.jump-start {
transition-timing-function: steps(5, jump-start);
}
.jump-end {
transition-timing-function: steps(5, jump-end);
}
.jump-none {
transition-timing-function: steps(5, jump-none);
}
.jump-both {
transition-timing-function: steps(5, jump-both);
}
.step-start {
transition-timing-function: step-start;
}
.step-end {
transition-timing-function: step-end;
}
规范
Specification |
---|
CSS Transitions # transition-timing-function-property |
浏览器兼容性
BCD tables only load in the browser