CSS animation-timing-function - 易学教程，面试笔记经验！

CSS 属性

CSS 属性animation-timing-function 确定动画在其整个周期持续时间内的顺序。

简写属性animation 的使用通常很实用，因为它允许所有动画属性

@keyframes 中的缓动函数规则可以单独定义。如果未指定任何内容，则使用所应用元素的动画计时函数。
需要注意的是，关键帧内的动画计时函数是一个规则特定的描述符，它逐个属性地应用，直到下一个相关关键帧或动画结束。
因此，不使用设置为 100% 或关键帧的动画计时函数。

可能的值

CSS 属性animation-timing-function 可以具有以下值之一:

1。 <easing-function> - 缓动函数，通过animation-name链接到动画，有预设的模式，如ease、线性、ease-in-out等，它们是由固定值定义的三次贝塞尔曲线。

cubic-bezier() 函数允许用户定义值。步长缓动函数根据步数和位置将时间分成相等的间隔。

ease - 默认值，对应cubic-bezier(0.25, 0.1, 0.25, 1.0)，导致动画中间加速，然后在结束时减速。
linear - 以恒定速度，立方贝塞尔曲线(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 的范围内.

2. steps(n, <jumpterm>) - 此属性生成一个动画，其中 n 个停止点在过渡中均匀间隔。

这些停止点的定位方式 - 无论是在开始、结束还是分布在整个过程中过渡 - 取决于所选的跳转项。

jump-start - 表示从左侧连续运行并在动画开始时触发初始跳转的函数。
jump-end - 表示从右侧连续的函数，并在动画结束时触发最后一次跳转。此行为是默认设置。
jump-none - 两端没有突变，因此插值序列中没有步骤。相反，会在 0% 和 100% 位置插入暂停，每个持续时间为 1/n。
jump-both - 在 0% 处都包含暂停和 100% 位置，本质上是在动画序列中引入一个附加步骤。
start - 与跳跃启动相同。
end - 与跳转结束相同。

3. step-start- 等于steps(1, Jump-start)。

4. step-end - 等于steps(1, Jump-end)。

注意:当在animation-*属性上指定多个逗号分隔值时，这些值是按照动画名称出现的顺序应用于动画。

语法

/* 关键字 */
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;

/* 函数 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/* Steps 函数关键字 */
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);

/* 多个动画 */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

适用范围

所有 HTML 元素，: :before 和 ::after 伪元素。

CSS animation-timing-function: ease

以下示例演示animation-timing-function :应用于框动画的缓动值ease。
框垂直移动（translateY），持续时间 5 秒，迭代 5 次。
CSS类ease修改了计时函数，影响动画的加速和减速。
它在动画中间加速，在动画结束时减速。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-demo {
      animation-timing-function: ease;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-demo">Ease</div>
</body>
</html>

CSS animation-timing-function: easy-in

以下示例演示了动画计时函数:应用于框动画的缓入值easy-in。
框垂直移动 (translateY)，持续时间为 5 秒，迭代次数为 5 次.
CSS类ease-in修改定时函数，影响动画的加速和减速。
动画开始缓慢，完成时过渡速度逐渐加快。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 400px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-in-demo {
      animation-timing-function: ease-in;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-in-demo">Ease-in</div>
</body>
</html>

CSS animation-timimg-function: escape-out

以下示例演示了动画计时功能:应用于框动画的缓出值escape-out。
框垂直移动 (translateY) 5秒持续时间和5次迭代。
CSS类ease-out修改计时函数，影响动画的加速和减速。
动画开始很快，随着动画的进展速度减慢。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-out-demo {
      animation-timing-function: ease-out;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-out-demo">Ease-out</div>
</body>
</html>

CSS animation-timimg-function: escape-in-out

以下示例演示了动画定时函数:应用于框动画的 escape-in-out 值。
盒子垂直移动（translateY），持续时间 5 秒，迭代 5 次。
CSS 类 ease-in-out 修改计时函数，影响加速和动画减速。
动画缓慢过渡，加速然后再次减速。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-in-out-demo {
      animation-timing-function: ease-in-out;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-in-out-demo">Ease-in-out</div>
</body>
</html>

CSS animation-timimg-function: linear

以下示例演示animation-timing-function:应用于框动画的线性值linear。
盒子垂直移动（translateY），持续时间 5 秒，迭代 5 次。
CSS 类 Linear 修改计时函数，影响加速度和动画减速。
动画以均匀的速度发生。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }

   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .linear-demo {
      animation-timing-function: linear;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box linear-demo">Linear</div>
</body>
</html>

CSS animation-timimg-function: 自定义贝塞尔函数

以下示例演示了用作animation-timing-function 属性值的自定义贝塞尔函数。
盒子垂直移动（translateY），持续时间为 5 秒，迭代次数为 5 次。
自定义演示类中的三次贝塞尔函数允许使用控制点创建自定义计时函数，以更精确地控制动画速度。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .custom-demo {
      /* 自定义贝塞尔函数 */
      animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box custom-demo">Cubic bezier</div>
</body>
</html>

CSS animation-timing-function: jump-start

在以下示例中，animation-timing-function: Jump-start 属性用于定义应用于框的动画的速度。
类 Jump-start 应用计时函数来改变框动画的行为。
此计时函数决定动画如何随时间进展。，影响加速、减速或基于步骤的移动等特性。
动画开始时，会发生第一次跳跃。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .jump-start {
      animation-timing-function:steps(6, jump-start);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-start">Jump-start</div>
</body>
</html>

CSS animation-timing-function: jump-end

在以下示例中，动画计时函数:jump-end 属性用于定义应用于盒子的动画的速度。
类 Jump-end 应用计时函数来改变盒子动画的行为。
此计时函数决定动画如何随时间进展，影响加速、减速或基于步骤的移动等特性。
当动画结束时，进行最后一次跳跃。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }

   .jump-end {
      animation-timing-function:steps(6, jump-end);
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-end">Jump-end</div>
</body>
</html>

CSS animation-timing-function: Jump-both

在以下示例中，animation-timing-function: Jump-both 属性用于定义应用于框的动画的速度。
类 Jump-both 应用计时函数来改变盒子动画的行为。
此计时函数决定动画如何随时间进展，影响诸如加速、减速或基于步进的移动。
动画期间，跳跃发生在任一侧。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .jump-both {
      animation-timing-function:steps(6, jump-both);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-both">Jump-both</div>
</body>
</html>

CSS animation-timing-function: Jump-none

在下面的示例中，animation-timing-function: Jump-none 属性用于定义应用于盒子的动画的速度。
类 Jump-none 应用计时函数来改变盒子动画的行为。
此计时函数决定动画如何随时间进展，影响加速、减速或基于步骤的移动等特性。
无跳跃两端都会发生。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .jump-none {
      animation-timing-function:steps(6, jump-none);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-none">Jump-none</div>
</body>
</html>

CSS animation-timing-function: step-start

在以下示例中，animation-timing-function: step-start 属性用于定义应用于框的动画的速度。
该类step-start 应用计时函数来改变框动画的行为。
此计时函数决定动画如何随时间进展，影响加速、减速或步进等特性-基于运动。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }

   .step-start {
      animation-timing-function: step-start;
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box step-start">Step-start</div>
</body>
</html>

CSS animation-timing-function: step-end

在下面的示例中，animation-timing-function: step-end 属性用于定义应用于框的动画的速度。
类 step- end 应用计时函数来改变框动画的行为。
此计时函数决定动画如何随时间进展，影响加速、减速或基于步骤等特性

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }

   .step-end {
      animation-timing-function: step-end;
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box step-end">Step-end</div>
</body>
</html>

CSS animation-timing-function: steps()

在在下面的示例中，animation-timing-function:steps()属性用于定义应用于框的动画的速度。
类开始和结束时，应用定时函数来改变框动画的行为。
这些定时函数决定动画如何随时间进展，影响加速、减速或基于步骤的移动等特性。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .start {
      animation-timing-function: steps(6, start);
   }
   .end {
      animation-timing-function: steps(6, end);
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box start">Start</div>
   <div class="box end">End</div>
</body>
</html>