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

CSS的transition-timing-function属性用于指定CSS过渡的速度曲线。它定义了如何计算转换开始和结束之间的中间值。

属性值

<easing-function>: 每个 <easing -function> 定义缓动函数以链接到要转换的相关属性，如 transition-property 中所述。
ease: 默认值。开始缓慢，中间加速，最后减速。
ease-in: 缓慢开始，最后加速..
ease-out: 快速开始并在接近结束时减速。
ease-in-out: 结合了ease-in和ease的特征-out.
linear - 以均匀速度过渡，等于三次贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。
step-start: 类似于steps(1，jump-start)。
step-end: 类似于steps(1，jump-end)。
cubic-bezier(p1, p2, p3, p4): 允许您定义自己的三次贝塞尔函数。这些值必须介于 0 和 1 之间。
steps( n, <jumpterm>): 过渡可以分为 n 个停止，每个停止持续相同的时间。
jump-start: 表示左连续函数，表示转换从第一次跳转发生的点开始。
jump-end: 表示右连续函数，表示最终跳转发生在动画结束时。
jump-none: 任一处都不会发生跳转结尾。或者，将位置保持在 0% 和 100% 标记处，每个标记持续时间为 1/n。
jump-both: 在 0% 和 100% 标记处暂停会增加过渡时间的一步。
start: 类似于跳跃开始。
end: 类似于跳跃-end.

适用范围

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

语法

关键字值

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

函数值

transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

步骤函数关键字

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

需要记住的要点

本质上，这允许您定义一条加速曲线，从而允许您在整个持续时间内改变过渡的速度。
创建加速曲线通过使用 <easing-function> 定义每个过渡属性。
在 CSS 过渡中使用多个缓动函数时，每个函数对应于 transition-property，充当转换属性列表。如果缓动函数小于转换属性，则用户代理会重复值列表以计算每个属性的适当值。如果函数较多，则会被截断为合适的大小。 CSS 声明在这两种情况下仍然有效。

CSS transition-timing-function: 立方贝塞尔曲线示例

以下示例演示了如何使用具有不同函数值的transition-timing-function属性 -

<html>
<head>
<style>
   div {
      width: 120px;
      padding: 10px;
      transition-property: all; 
      background-color: yellow;
      transition-duration: 3s;
      margin: 5px;
   }
   div:hover {
      background-color: green;
      padding-right: 200px;
      color: white;
   }
   .box1 {
      transition-timing-function: ease;
   }
   .box2 {
      transition-timing-function: ease-in;
   }
   .box3 {
      transition-timing-function: ease-out;
   }
   .box4 {
      transition-timing-function: ease-in-out;
   }
   .box5 {
      transition-timing-function: linear;
   }
   .box6 {
      transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
   }
</style>
</head>
<body>
   <div class="box1">ease</div>
   <div class="box2">ease-in</div>
   <div class="box3">ease-out</div>
   <div class="box4">ease-in-out</div>
   <div class="box5">linear</div>
   <div class="box6">cubic-bezier(0.2, -2, 0.8, 2)</div>
</body>
</html>

CSS transition-timing-function: steps示例

以下示例演示了transition-timing-function属性与不同的基于steps的计时函数 -

<html>
<head>
<style>
   div {
      width: 140px;
      padding: 10px;
      transition-property: all; 
      background-color: yellow;
      transition-duration: 3s;
      margin: 5px;
   }
   div:hover {
      background-color: green;
      padding-right: 200px;
      color: white;
   }
   .box1 {
      transition-timing-function: steps(4, jump-start);
   }
   .box2 {
      transition-timing-function: steps(4, jump-end);
   }
   .box3 {
      transition-timing-function: steps(4, jump-none);
   }
   .box4 {
      transition-timing-function: steps(4, jump-both);
   }
   .box5 {
      transition-timing-function: step-start;
   }
   .box6 {
      transition-timing-function: step-end;
   }
</style>
</head>
<body>
   <div class="box1">steps(4, jump-start)</div>
   <div class="box2">steps(4, jump-end)</div>
   <div class="box3">steps(4, jump-none)</div>
   <div class="box4">steps(4, jump-both)</div>
   <div class="box5">step-start</div>
   <div class="box6">step-end</div>
</body>
</html>