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 − 以均匀速度过渡，等于 cubic-bezier(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 − 类似于 jump-start。
end − 类似于 jump-end。

应用于

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

语法

关键字值

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);

Steps 函数关键字

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 指定的一个属性，充当 transition-property 列表。如果缓动函数少于过渡属性，则用户代理会重复值列表以计算每个属性的适当值。如果函数更多，则将其截断到适当的大小。这两种情况下 CSS 声明仍然有效。

CSS transition-timing-function - cubic-Bezier 示例

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

Open Compiler

<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 属性：

Open Compiler

<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>

打印页面