transition-timing-function

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

transition-timing-function CSS 属性设置了受过渡效果影响的 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">Hover to see<br />the transition.</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> 为每个要过渡的属性进行定义。

您可以指定多个缓动函数；每个缓动函数都将应用于由transition-property 属性（它充当 transition-property 列表）指定的相应属性。如果指定的缓动函数少于 transition-property 列表中的缓动函数，则用户代理必须通过重复值列表来计算要使用的值，直到每个过渡属性都有一个值。如果缓动函数更多，则列表将被截断为适当的大小。在这两种情况下，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 easing 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;

值

<easing-function>

每个<easing-function> 表示缓动函数，用于链接到transition-property 中定义的相应过渡属性。

非步进关键字值（ease、linear、ease-in-out 等）每个都代表一个具有固定四个点值的立方贝塞尔曲线，其中 cubic-bezier() 函数值允许使用非预定义值。步进缓动函数将输入时间分成指定数量的等长间隔。它由步数和步进位置定义。

ease

等于 cubic-bezier(0.25, 0.1, 0.25, 1.0)，默认值，过渡中间速度增加，结尾速度减慢。

linear

等于 cubic-bezier(0.0, 0.0, 1.0, 1.0)，以恒定速度过渡。

ease-in

等于 cubic-bezier(0.42, 0, 1.0, 1.0)，缓慢开始，过渡速度逐渐增加直到完成。

ease-out

等于 cubic-bezier(0, 0, 0.58, 1.0)，快速开始过渡，随着过渡的继续速度减慢。

ease-in-out

等于 cubic-bezier(0.42, 0, 0.58, 1.0)，缓慢开始过渡，加速，然后再次减速。

cubic-bezier(p1, p2, p3, p4)

作者定义的立方贝塞尔曲线，其中 p1 和 p3 值必须在 0 到 1 的范围内。

steps(n, <jump-term>)

在过渡过程中沿着 n 个停止点显示过渡，每个停止点显示时间长度相等。例如，如果 n 为 5，则有 5 个步骤。过渡是暂时停留在 0%、20%、40%、60% 和 80% 处，还是停留在 20%、40%、60%、80% 和 100% 处，或者在 0% 和 100% 之间进行 5 次停止，或者进行 5 次停止（包括 0% 和 100% 标记）（在 0%、25%、50%、75% 和 100% 处），取决于以下哪个跳跃术语被使用：

jump-start: 表示左连续函数，因此第一次跳跃发生在过渡开始时；
jump-end: 表示右连续函数，因此最后一次跳跃发生在动画结束时；
jump-none: 两端都没有跳跃。相反，在 0% 标记和 100% 标记处都暂停，每个暂停持续时间的 1/n。
jump-both: 包括在 0% 和 100% 标记处的暂停，有效地在过渡时间中增加一个步骤。
start: 与 jump-start 相同。
end: 与 jump-end 相同。

step-start

等于 steps(1, jump-start)

step-end

等于 steps(1, jump-end)

无障碍

某些动画可以提供帮助，例如引导用户了解预期的操作，显示用户界面中的关系，并告知用户已发生的操作。动画可以帮助减少认知负荷，防止变化盲点，并在空间关系中建立更好的回忆。然而，一些动画可能对患有注意力缺陷多动症 (ADHD) 等认知问题的人造成问题，某些类型的运动可能会引发前庭疾病、癫痫、偏头痛和视网膜敏感性。

考虑提供暂停或禁用动画的机制，并使用减少运动媒体查询（或等效的用户代理客户端提示 Sec-CH-Prefers-Reduced-Motion）为表达了对较少动画偏好的用户创建补充体验。

正式定义

初始值	`ease`
应用于	所有元素，`::before` 和 `::after` 伪元素
继承性	否
计算值	同指定值
动画类型	不可动画化

正式语法

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="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">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 (const el of els) {
    el.classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);

css

.ease {
  transition-timing-function: ease;
}
.ease-in {
  transition-timing-function: ease-in;
}
.ease-out {
  transition-timing-function: ease-out;
}
.ease-in-out {
  transition-timing-function: ease-in-out;
}
.linear {
  transition-timing-function: linear;
}
.cb {
  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

步进示例

<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 (const el of els) {
    el.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;
}

规范

规范
CSS 过渡 # transition-timing-function-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 8 月 13 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题