transition-timing-function

**transition-timing-function** CSS 属性设置受 过渡效果 影响的 CSS 属性的中间值是如何计算的。

试一试

从本质上讲，这使您可以建立一个加速曲线，以便过渡的速度可以在其持续时间内变化。

此加速曲线使用一个 <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, <jumpterm>)

在过渡过程中沿 n 个停止点显示过渡，每个停止点显示相同的时间长度。例如，如果n 为 5，则有 5 个步骤。过渡是否在 0%、20%、40%、60% 和 80% 处短暂保持，或者在 20%、40%、60%、80% 和 100% 处，或者在过渡过程中在 0% 和 100% 之间进行 5 次停止，或者在包括 0% 和 100% 标记（在 0%、25%、50%、75% 和 100% 处）进行 5 次停止，取决于使用了以下哪种跳跃项

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                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

示例

三次贝塞尔曲线示例

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);
}

步骤示例

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 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅