transition-timing-function

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

transition-timing-function CSS 屬性設定了受過渡效果影響的 CSS 屬性的中間值是如何計算的。

試一試

transition-timing-function: linear;

transition-timing-function: ease-in;

transition-timing-function: steps(6, end);

transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

這本質上允許您建立一個加速曲線，從而使過渡的速度在其持續時間內有所變化。

此加速曲線使用一個<easing-function> 為每個要過渡的屬性進行定義。

您可以指定多個緩動函式；每個緩動函式都將應用於由transition-property 屬性（它充當 transition-property 列表）指定的相應屬性。如果指定的緩動函式少於 transition-property 列表中的緩動函式，則使用者代理必須透過重複值列表來計算要使用的值，直到每個過渡屬性都有一個值。如果緩動函式更多，則列表將被截斷為適當的大小。在這兩種情況下，CSS 宣告都保持有效。

語法

css

/* Keyword values */
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;

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

/* Steps Function keywords */
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);

/* Multiple easing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

值

<easing-function>

每個<easing-function> 表示緩動函式，用於連結到transition-property 中定義的相應過渡屬性。

非步進關鍵字值（ease、linear、ease-in-out 等）每個都代表一個具有固定四個點值的立方貝塞爾曲線，其中 cubic-bezier() 函式值允許使用非預定義值。步進緩動函式將輸入時間分成指定數量的等長間隔。它由步數和步進位置定義。

ease

等於 cubic-bezier(0.25, 0.1, 0.25, 1.0)，預設值，過渡中間速度增加，結尾速度減慢。

linear

等於 cubic-bezier(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 的範圍內。

steps(n, <jump-term>)

在過渡過程中沿著 n 個停止點顯示過渡，每個停止點顯示時間長度相等。例如，如果 n 為 5，則有 5 個步驟。過渡是暫時停留在 0%、20%、40%、60% 和 80% 處，還是停留在 20%、40%、60%、80% 和 100% 處，或者在 0% 和 100% 之間進行 5 次停止，或者進行 5 次停止（包括 0% 和 100% 標記）（在 0%、25%、50%、75% 和 100% 處），取決於以下哪個跳躍術語被使用：

jump-start: 表示左連續函式，因此第一次跳躍發生在過渡開始時；
jump-end: 表示右連續函式，因此最後一次跳躍發生在動畫結束時；
jump-none: 兩端都沒有跳躍。相反，在 0% 標記和 100% 標記處都暫停，每個暫停持續時間的 1/n。
jump-both: 包括在 0% 和 100% 標記處的暫停，有效地在過渡時間中增加一個步驟。
start: 與 jump-start 相同。
end: 與 jump-end 相同。

step-start

等於 steps(1, jump-start)

step-end

等於 steps(1, jump-end)

無障礙

某些動畫可以提供幫助，例如引導使用者瞭解預期的操作，顯示使用者介面中的關係，並告知使用者已發生的操作。動畫可以幫助減少認知負荷，防止變化盲點，並在空間關係中建立更好的回憶。然而，一些動畫可能對患有注意力缺陷多動症 (ADHD) 等認知問題的人造成問題，某些型別的運動可能會引發前庭疾病、癲癇、偏頭痛和視網膜敏感性。

考慮提供暫停或停用動畫的機制，並使用減少運動媒體查詢（或等效的使用者代理客戶端提示 Sec-CH-Prefers-Reduced-Motion）為表達了對較少動畫偏好的使用者建立補充體驗。

正式定義

初始值	`ease`
應用於	所有元素，`::before` 和 `::after` 偽元素
繼承性	否
計算值	同指定值
動畫型別	不可動畫化

正式語法

transition-timing-function = 
  <easing-function>#  

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

示例

三次貝塞爾曲線示例

<div class="parent">
  <div class="ease">ease</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>

.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (const el of els) {
    el.classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);

css

.ease {
  transition-timing-function: ease;
}
.ease-in {
  transition-timing-function: ease-in;
}
.ease-out {
  transition-timing-function: ease-out;
}
.ease-in-out {
  transition-timing-function: ease-in-out;
}
.linear {
  transition-timing-function: linear;
}
.cb {
  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

步進示例

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>

.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

function updateTransition() {
  const els = document.querySelectorAll(".parent > div[class]");
  for (const el of els) {
    el.classList.toggle("box1");
  }
}

const intervalID = setInterval(updateTransition, 10000);

css

.jump-start {
  transition-timing-function: steps(5, jump-start);
}
.jump-end {
  transition-timing-function: steps(5, jump-end);
}
.jump-none {
  transition-timing-function: steps(5, jump-none);
}
.jump-both {
  transition-timing-function: steps(5, jump-both);
}
.step-start {
  transition-timing-function: step-start;
}
.step-end {
  transition-timing-function: step-end;
}

規範

規範
CSS 過渡 # transition-timing-function-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 8 月 13 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題