1. Web
  2. CSS
  3. <easing-function>

<easing-function>

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<easing-function> CSS 数据类型表示一个数学函数，用于描述值变化的速率。

这种两个值之间的过渡可以应用于不同的场景。它可用于描述动画过程中值的变化速度。这使你可以在动画持续时间内改变动画的速度。你可以为 CSS transition 和 animation 属性指定缓动函数。

语法

css
/* Keyword linear easing function */
linear                /* linear(0, 1) */

/* Custom linear easing functions */
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)

/* Keyword cubic Bézier easing functions */
ease                  /* cubic-bezier(0.25, 0.1, 0.25, 1) */
ease-in               /* cubic-bezier(0.42, 0, 1, 1) */
ease-out              /* cubic-bezier(0, 0, 0.58, 1) */
ease-in-out           /* cubic-bezier(0.42, 0, 0.58, 1) */

/* Custom cubic Bézier easing function */
cubic-bezier(0.25, 0.1, 0.25, 1)

/* Keyword step easing functions */
step-start            /* steps(1, jump-start) */
step-end              /* steps(1, jump-end) */

/* Custom step easing functions */
steps(4, end)
steps(10, jump-both)

值

<easing-function> 可以是以下类型之一：

<linear-easing-function>

创建以恒定速率进行的过渡。此函数可以使用以下方法之一指定：

linear

指定恒定的插值速率，在整个持续时间内进度速率没有变化（即没有加速或减速）。此关键字值等同于 linear(0, 1)。它也可以表示为 cubic-bezier(0, 0, 1, 1)。

Graph of Input progress to Output progress showing a line extending from the origin to (1, 1).

注意： linear 关键字始终被解释为 linear(0, 1)，而函数 linear(0, 1) 被解释为 linear(0 0%, 1 100%)。

linear()

使用 <number> 值定义多个进度点，并可选择使用 <percentage> 值来控制它们的时序。

<cubic-bezier-easing-function>

创建具有可变变化速率的平滑过渡。此函数可以使用以下方法之一指定：

ease

表示缓动函数 cubic-bezier(0.25, 0.1, 0.25, 1)。它表示插值开始缓慢，急剧加速，然后逐渐减速直至结束。它类似于 ease-in-out 关键字，但它在开始时加速更急剧。

ease-in

表示缓动函数 cubic-bezier(0.42, 0, 1, 1)。它表示插值开始缓慢，然后逐渐加速直至结束，此时突然停止。

ease-out

表示缓动函数 cubic-bezier(0, 0, 0.58, 1)。它表示插值突然开始，然后逐渐减速直至结束。

ease-in-out

表示缓动函数 cubic-bezier(0.42, 0, 0.58, 1)。它表示插值开始缓慢，加速，然后减速直至结束。在开始时，它表现得像 ease-in 关键字；在结束时，它像 ease-out 关键字。

Graphs of Input progress to Output progress, of which ease shows a curved line quickly rising from the origin to (1, 1); ease-in shows a shallow curved line from the origin that straightens out as it approaches (1, 1); ease-out shows a straight diagonal line that slightly curves as it gets close to (1, 1); and ease-in-out shows a symmetrical, S-shaped line curving from the origin to (1, 1).

cubic-bezier()

使用四个 <number> 值定义自定义曲线，这些值指定两个控制点的坐标。x 坐标必须在 [0, 1] 范围内。

<step-easing-function>

创建分步过渡，将动画分成若干等长间隔，导致动画从一个步骤跳到下一个步骤而不是平滑过渡。此函数可以使用以下方法之一指定：

step-start

表示缓动函数 steps(1, jump-start) 或 steps(1, start)。它表示插值立即跳到其最终状态，并保持在该状态直到结束。

step-end

表示缓动函数 steps(1, jump-end) 或 steps(1, end)。它表示插值保持在其初始状态直到结束，此时它直接跳到其最终状态。

Two graphs of Input progress to Output progress. In the step-start graph, an unfilled circle represents the origin point (0, 0), with a horizontal line extending from (0, 1) to (1, 1). In the step-end graph, a horizontal line extends from the origin to (1, 0), with an unfilled circle at (1,0) and a solid circle at (1, 1).

steps()

使用 <integer> 创建阶梯状曲线，以指定间隔数和可选关键字来控制跳跃的时序。

正式语法

<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

示例

缓动函数比较

此示例通过动画提供了不同缓动函数之间的轻松比较。从下拉菜单中，你可以选择一个缓动函数——有几个关键字以及一些 cubic-bezier() 和 steps() 选项。选择一个选项后，你可以使用提供的按钮开始和停止动画。

HTML

html
<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Start animation</button>
  </li>
  <li>
    <label for="easing-select">Choose an easing function:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>

CSS

css
body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgb(25 255 255 / 80%),
    rgb(25 255 255 / 40%)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

JavaScript

js
const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "Start animation") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "Stop animation";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "Start animation";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});

结果

规范

规范
CSS 缓动函数级别 1
# 缓动函数

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者 最后修改于 。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.