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 2015年9月.
CSS transition-timing-function 属性设置如何计算受过渡效果影响的 CSS 属性的中间值。
尝试一下
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: steps(6, end);
transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);
<section id="default-example">
<div id="example-element">悬停以查看<br />过渡。</div>
</section>
#example-element {
background-color: #e4f0f5;
color: black;
padding: 1rem;
border-radius: 0.5rem;
font: 1em monospace;
width: 100%;
transition: margin-right 2s;
}
#default-example:hover > #example-element {
background-color: #990099;
color: white;
margin-right: 40%;
}
这条加速度曲线被 <easing-function> 所定义，之后作用到每个 CSS 属性的过渡。
你可以规定多个缓动函数，通过使用 transition-property 属性，可以根据主列表（transition-property 的列表）给每个 CSS 属性应用相应的缓动函数。如果缓动函数的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果缓动函数比主列表要多，缓动函数函数列表会被截断至合适的大小。这两种情况下声明的 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中定义被过渡属性，每个<easing-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 |
浏览器兼容性
Loading…