CSS | animation-timing-function 属性

在 CSS 中，animation-timing-function 属性规定了动画中每个关键帧之间的速度变化。它控制动画中过程的节奏感和“节奏感”。

用法

animation-timing-function 可以在关键帧声明中（使用 @keyframes）或者动画声明中使用，例如：

/* 在 @keyframes 中使用 */
@keyframes example {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  animation-timing-function: ease-in-out;
}

/* 在动画声明中使用 */
div {
  animation: example 3s ease-in-out;
}

animation-timing-function 的值可以是以下之一：

• linear：动画过程中速度不变。
• ease：默认值，动画在开始时加速，在结束时减速。
• ease-in：动画过程中开始时缓慢，然后逐渐加速。
• ease-out：动画过程中开始时加速，然后逐渐减速。
• ease-in-out：动画过程中开始时缓慢，然后逐渐加速，到结束时又逐渐减速。
• cubic-bezier(n,n,n,n)：自定义贝塞尔函数，其中 n 可以是 0 至 1 之间的任意数值。

兼容性

animation-timing-function 属性在各大浏览器中得到了普遍支持。但是，某些浏览器可能需要前缀，如 -webkit- 和 -moz-。

示例

以下是一个简单的样例，用于演示 animation-timing-function 属性的使用：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: example 3s ease-in-out infinite;
}

@keyframes example {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 100px);
    animation-timing-function: ease-in;
  }
  100% {
    left: 0;
  }
}

在这个例子中，我们使用 animation 属性将 example 动画应用于 .box 元素。该动画设置为 3 秒，在开始和结束时为 ease-in-out。我们通过在 50% 处使用 ease-in 来更改动画的速度，从而使其在中间阶段加速。在整个动画中，元素会在左侧和右侧之间来回移动。

参考资料

• MDN web docs
• W3Schools