此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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
示例
三次方贝塞尔曲线示例
<div class="parent">
<div class="ease">ease</div>
<div class="easein">ease-in</div>
<div class="easeout">ease-out</div>
<div class="easeinout">ease-in-out</div>
<div class="linear">linear</div>
<div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
.parent {
}
.parent > div[class] {
width: 12em;
min-width: 12em;
margin-bottom: 4px;
background-color: black;
border: 1px solid red;
color: white;
transition-property: all;
transition-duration: 7s;
}
.parent > div.box1 {
width: 90vw;
min-width: 24em;
background-color: magenta;
color: yellow;
border: 1px solid orange;
transition-property: all;
transition-duration: 2s;
}
function updateTransition() {
const els = document.querySelectorAll(".parent > div[class]");
for (let i = 0; i < els.length; i++) {
els[i].classList.toggle("box1");
}
}
const intervalID = setInterval(updateTransition, 10000);
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 示例
<div class="parent">
<div class="jump-start">jump-start</div>
<div class="jump-end">jump-end</div>
<div class="jump-both">jump-both</div>
<div class="jump-none">jump-none</div>
<div class="step-start">step-start</div>
<div class="step-end">step-end</div>
</div>
.parent {
}
.parent > div[class] {
width: 12em;
min-width: 12em;
margin-bottom: 4px;
background-color: black;
border: 1px solid red;
color: white;
transition-property: all;
transition-duration: 7s;
}
.parent > div.box1 {
width: 90vw;
min-width: 24em;
background-color: magenta;
color: yellow;
border: 1px solid orange;
transition-property: all;
transition-duration: 2s;
}
function updateTransition() {
const els = document.querySelectorAll(".parent > div[class]");
for (let i = 0; i < els.length; i++) {
els[i].classList.toggle("box1");
}
}
const intervalID = setInterval(updateTransition, 10000);
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...