“这是我参与更文挑战的第25天，活动详情查看：更文挑战”

前言

上一篇文章【译】css timing-function
，我们学习了 css 的计时函数。 css 计时函数也被称为 easing functions。它是一个（数学）函数，它指定被动画化或从一个值转换到另一个值的物体随着时间的推移的速度。它描述了过渡或动画将如何在其持续时间的一个周期内进行。它可以使用多个预定义关键字之一来定义常见计时功能。其主要用作于 transition-timing-function 和 animation-timing-function 这两个属性的属性值。下面我们学习一下这两个 css 属性。

transition-timing-function

transition-timing-function 属性用于指定一个计时函数，该函数定义了对象从一个值转换到另一个值的速度。

transition-timing-function 将计时函数作为一个值。它描述了过渡将在其一个周期内如何进行，并允许它在其过程中改变速度。

如果你在一个元素上定义了多个过渡，例如，如果你想要过渡元素的背景颜色和它的位置，你可以指定多个计时函数，每个函数对应一个使用 transition-property 属性指定的相应属性。

在 css transition 简写属性中指定 transition-timing-function 通常更方便。如：

transition: left 1s ease-in-out, background-color 1s ease-out 1s;
复制代码

其中的 ease-in-out、ease-out 分别指定了左坐标和背景色的速度变化规律。

官方语法

语法：

transition-timing-function: <timing-function>
复制代码

初始值：ease
适用于：所有元素；和 ::before 和 ::after 伪元素
可否被动画：否

属性值

<timing-function>，所有的可选值可以参考上一篇文章, 【译】css timing-function
，文章有所有可选项的详细介绍和 demo。

用法示例

下面使用预定义的计时函数关键字指定悬停时从一种背景颜色到另一种背景颜色的过渡。

.element {
    background-color: #009966;
    transition-property: background-color;
    transition-duration: .3s;
    transition-timing-function: ease-out;
}

.element:hover {
    background-color: #0099CC;
}
复制代码

以下所有的转换时序函数值都是有效的：

transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.42, 0, 1, 1); /* equivalent to the "ease-in" keyword */
transition-timing-function: steps(4, start); /* make transition over 4 steps */
transition-timing-function: ease-in-out;
复制代码

在线 Demo

可以查阅 css transition-timing-function demo

animation-timing-function

animation-timing-function 属性用于指定一个时间函数，它定义了动画对象随时间变化的速度。它描述了动画将如何在其持续时间的一个周期内进行，从而允许它在其过程中改变速度。

animation-timing-function 将计时函数作为一个值。

如果在一个元素上应用多个动画，则可以指定多个计时函数，每个函数用于使用 animation-name 属性指定的相应动画。

指定的计时函数适用于动画的每次迭代，而不是完整的整个动画。例如，如果动画具有动画计时功能：ease-in-out； 和 animation-iteration-count: 2;，它将在开始时缓入，在接近第一次迭代结束时缓出，在第二次迭代开始时缓入，并在接近结束时再次缓出动画。

除了能够为整个动画指定计时函数之外，您还可以在关键帧规则内为动画的单个关键帧指定动画计时函数，该规则用于在该关键帧中的元素进入下一个关键帧时为其设置动画（有关示例，请参见下面的示例部分）。如果没有为关键帧指定计时函数，则使用为整个动画指定的计时函数。

对于关键帧动画，计时功能适用于关键帧之间而不是整个动画。换句话说，计时函数应用于关键帧的开始和关键帧的结束。

通常在 css animation 简写属性中指定 animation-timing-function 更方便。animation 简写语法如下：

/* syntax of one animation definition */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

/* two animation definitions */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state],
           [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
复制代码

官方语法

语法：

animation-timing-function: <timing-function>
复制代码

初始值：ease
适用于：所有元素；和 ::before 和 ::after 伪元素
可否被动画：否

属性值

<timing-function>，所有的可选值可以参考上一篇文章, 【译】css timing-function
，文章有所有可选项的详细介绍和 demo。

用法示例

以下示例将 animation-timing-function 应用于元素的两个动画：

.element {
    animation-name: rotate, fall;
    animation-timing-function: ease-in, ease-in-out;
} 
复制代码

以下示例将 animation-timing-function 应用于 @keyframes 规则内的各个关键帧：

@keyframes bounce {

  from {
    top: 100px;
    animation-timing-function: ease-out;
  }

  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }

  50% {
    top: 150px;
    animation-timing-function: ease-out;
  }

  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }

  to {
    top: 100px;
  }

}

复制代码

以下所有的转换时序函数值都是有效的

animation-timing-function: linear;
animation-timing-function: cubic-bezier(0.42, 0, 1, 1); /* equivalent to the "ease-in" keyword */
animation-timing-function: steps(4, start); 
animation-timing-function: ease-in-out;
复制代码