animation-timing-function

animation-timing-function CSS 属性设置动画在每个循环持续时间内的进度。

语法

css

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* cubic-bezier() function values */
animation-timing-function: cubic-bezier(0.42, 0, 1, 1); /* ease-in */
animation-timing-function: cubic-bezier(0, 0, 0.58, 1); /* ease-out */
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */

/* linear() function values */
animation-timing-function: linear(0, 0.25, 1);
animation-timing-function: linear(0 0%, 0.25 50%, 1 100%);
animation-timing-function: linear(0, 0.25 50% 75%, 1);
animation-timing-function: linear(0, 0.25 50%, 0.25 75%, 1);

/* steps() function values */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;

值

<easing-function>

对应于给定动画的缓动函数，由 animation-name 确定。

非阶跃关键字值（ease、linear、ease-in-out 等）每个都表示具有固定四点值的立方贝塞尔曲线，而 cubic-bezier() 函数值允许指定非预定义值。steps() 缓动函数将输入时间划分为指定数量的等长间隔。其参数包括步数和步位置。

linear

等于 cubic-bezier(0.0, 0.0, 1.0, 1.0)，以均匀的速度进行动画。

ease

等于 cubic-bezier(0.25, 0.1, 0.25, 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(<number [0,1]> , <number> , <number [0,1]> , <number>)

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

linear(<number> <percentage>{1,2}, …)

该函数在提供的缓动停止点之间进行线性插值。停止点是一对输出进度和输入百分比。输入百分比是可选的，如果未指定则会推断。如果未提供输入百分比，则第一个和最后一个停止点分别设置为 0% 和 100%，中间的停止点接收通过在具有百分比值的最近的前一个和下一个点之间线性插值得出的百分比值。

steps(<integer>, <step-position>)

沿着过渡的 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)

注意：当您在 animation-* 属性上指定多个用逗号分隔的值时，它们将按 animation-name 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参阅设置多个动画属性值。

注意：animation-timing-function 在创建 CSS 滚动驱动的动画时与常规基于时间的动画具有相同的效果。

描述

可以在 @keyframes 规则中的单个关键帧上指定缓动函数。如果在关键帧上未指定animation-timing-function，则该关键帧将使用应用动画的元素的animation-timing-function对应的值。

在关键帧内，animation-timing-function 是一个特定于 at-rule 的描述符，而不是同名属性。计时没有被动画化。相反，关键帧的缓动函数是在逐个属性的基础上从指定它的关键帧应用到指定该属性的下一个关键帧，或者如果后续没有指定该属性的关键帧，则应用到动画结束。因此，在100% 或to 关键帧上指定的animation-timing-function将永远不会被使用。

正式定义

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

正式语法

animation-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}

示例

本节中的所有示例都使用不同的 animation-timing-function 值为几个 <div> 元素的 width 和 background-color 属性设置动画。宽度从 0 动画到 100%，背景颜色从青柠色动画到品红色。

线性函数示例

此示例演示了各种 linear() 缓动函数值的效用。

<div class="parent">
  <div class="linear">'linear' value</div>
  <div class="linear-fn1">linear(0, 0.5 50%, 1)</div>
  <div class="linear-fn2">linear(0, 0.25 75%, 1)</div>
  <div class="linear-fn3">linear(0, 0.75 25%, 1)</div>
  <div class="linear-fn4">linear(0, 0.5 25% 75%, 1)</div>
  <div class="linear-fn5">linear(0, 0.25 45%, 0.75 55%, 0.5 70%, 1)</div>
  <div class="linear-fn6">linear(0, 1.2 50%, 0.75 80%, 1)</div>
  <div class="linear-fn7">linear(0, 0.5 75%, 1 120%)</div>
</div>
<div class="x-axis"><span>25%</span><span>50%</span><span>75%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 24.8%,
    grey 24.8%,
    grey 25.2%,
    white 25.2%,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%,
    white 74.8%,
    grey 74.8%,
    grey 75.2%,
    white 75.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}
.linear-fn1 {
  animation-timing-function: linear(0, 0.5 50%, 1);
}
.linear-fn2 {
  animation-timing-function: linear(0, 0.25 75%, 1);
}
.linear-fn3 {
  animation-timing-function: linear(0, 0.75 25%, 1);
}
.linear-fn4 {
  animation-timing-function: linear(0, 0.5 25% 75%, 1);
}
.linear-fn5 {
  animation-timing-function: linear(0, 0.25 45%, 0.75 55%, 0.5 70%, 1);
}
.linear-fn6 {
  animation-timing-function: linear(0, 1.2 50%, 0.75 80%, 1);
}
.linear-fn7 {
  animation-timing-function: linear(0, 0.5 75%, 1 120%);
}

下图显示了本示例中使用的所有 linear() 函数值的图形。输入进度（时间）绘制在 x 轴上，输出进度绘制在 y 轴上。根据语法，输入进度范围从 0 到 100%，输出范围从 0 到 1。

An image showing 'linear' function graphs

请注意，输出可以向前或向后。

三次贝塞尔曲线示例

此示例演示了各种贝塞尔曲线缓动函数的效用。

<div class="parent">
  <div class="linear">linear</div>
  <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="cb">cubic-bezier(.5, -0.5, 1, 1.5)</div>
</div>
<div class="x-axis"><span>50%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}
.ease {
  animation-timing-function: ease;
}
.easein {
  animation-timing-function: ease-in;
}
.easeout {
  animation-timing-function: ease-out;
}
.easeinout {
  animation-timing-function: ease-in-out;
}
.cb {
  animation-timing-function: cubic-bezier(0.5, -0.5, 1, 1.5);
}

下图显示了本示例中使用的所有三次贝塞尔曲线函数值的图形。输入进度（时间）范围从 0 到 1，输出进度范围从 0 到 1。

An image showing 'cubic-bezier' function graphs

步骤示例

此示例演示了几个步骤缓动函数值的效用。

<div class="parent">
  <div class="linear">linear</div>
  <div class="start">steps(4, start)</div>
  <div class="jump-start">steps(4, jump-start)</div>
  <div class="end">steps(4, end)</div>
  <div class="jump-end">steps(4, jump-end)</div>
  <div class="jump-both">steps(4, jump-both)</div>
  <div class="jump-none">steps(4, jump-none)</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
<div class="x-axis"><span>25%</span><span>50%</span><span>75%</span></div>
<button>Play animation</button>

const btn = document.querySelector("button");
const divs = document.querySelectorAll(".parent > div[class]");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", "true");
  for (const div of divs) {
    div.classList.remove("animate");
    void div.offsetWidth;
    div.classList.add("animate");
  }
  setTimeout(() => {
    btn.removeAttribute("disabled");
  }, 11000);
});

.x-axis {
  display: flex;
  justify-content: space-evenly;
  width: 80vw;
  margin-left: 4px;
}

.parent {
  background: linear-gradient(
    to right,
    white 24.8%,
    grey 24.8%,
    grey 25.2%,
    white 25.2%,
    white 49.8%,
    grey 49.8%,
    grey 50.2%,
    white 50.2%,
    white 74.8%,
    grey 74.8%,
    grey 75.2%,
    white 75.2%
  );
  width: 80vw;
  font-family: monospace;
  font-weight: bold;
  border: 2px solid grey;
}

.animate {
  animation-name: changeme;
}

.parent > div[class] {
  animation-fill-mode: forwards;
  animation-duration: 10s;

  width: 0;
  margin-bottom: 4px;
  padding: 5px 0;
  box-sizing: border-box;
  text-wrap: nowrap;
  background-color: lime;
}

@keyframes changeme {
  0% {
    width: 0em;
  }
  100% {
    width: 100%;
    background-color: orange;
  }
}

.linear {
  animation-timing-function: linear;
}

.start {
  animation-timing-function: steps(4, start);
}
.jump-start {
  animation-timing-function: steps(4, jump-start);
}
.end {
  animation-timing-function: steps(4, end);
}
.jump-end {
  animation-timing-function: steps(4, jump-end);
}
.jump-both {
  animation-timing-function: steps(4, jump-both);
}
.jump-none {
  animation-timing-function: steps(4, jump-none);
}
.step-start {
  animation-timing-function: step-start;
}
.step-end {
  animation-timing-function: step-end;
}

下图显示了本示例中使用的所有 step() 函数值的图形。输入进度（时间）和输出进度范围从 0 到 1。

image showing 'steps' function graphs

规范

规范
CSS 动画级别 1 # animation-timing-function
CSS 缓动函数级别 1 # 线性缓动函数解析

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

使用 CSS 动画
<easing-function>
JavaScript AnimationEvent API
三次贝塞尔曲线生成工具
其他相关的动画属性：animation、animation-composition、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timeline