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 偽元素。

語法

關鍵字值

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

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

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

列印頁面