--- title: transition-timing-function slug: Web/CSS/transition-timing-function translation_of: Web/CSS/transition-timing-function ---
{{CSSRef}}

transition-timing-function CSS 屬性用於表示各個被動畫特效影響的屬性的區間值計算方式。

{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}

 

本質上，這個屬性讓你使用加速度曲線來表示動畫變換的速度。

而每個可以動畫化的屬性使用一個 {{cssxref("<timing-function>")}} 作為加速度曲線。

 

你也許有許多時間函數，而你可以透過使用 {{ cssxref("transition-property") }} 屬性來個別設置。如果有前述清單的數量超過時間函數的數量，則會使用預設值 ease；如果少於那多餘的時間函數會被忽略，在這兩種情況，CSS 宣告總會有效。

語法

/* Keyword */
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, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: frames(10);

/* 多個函數 */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* 全域值 */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

/* 包含 transition-property */
transition-property: width, height;
transition-timing-function: ease-in, ease-out; // ease-in to width and ease-out to height

值

<timing-function>
每個 {{cssxref("<timing-function>")}} 連結到對應的動畫化屬性，請參考 {{ cssxref("transition-property") }}。

公式語法

{{csssyntax}}

範例

transition-timing-function: ease

{{EmbedLiveSample("ttf_ease",275,150)}}

transition-timing-function: ease-in

{{EmbedLiveSample("ttf_easein",275,150)}}

transition-timing-function: ease-out

{{EmbedLiveSample("ttf_easeout",275,150)}}

transition-timing-function: ease-in-out

{{EmbedLiveSample("ttf_easeinout",275,150)}}

transition-timing-function: linear

{{EmbedLiveSample("ttf_linear",275,150)}}

transition-timing-function: step-start

{{EmbedLiveSample("ttf_stepstart",275,150)}}

transition-timing-function: step-end

{{EmbedLiveSample("ttf_stepend",275,150)}}

transition-timing-function: steps(4, end)

{{EmbedLiveSample("ttf_step4end",275,150)}}

規格

規格 狀態 備註
{{ SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function') }} {{ Spec2('CSS3 Transitions') }} 初始定義

{{cssinfo}}

相容性

{{Compat("css.properties.transition-timing-function")}}

看更多