transition-timing-function
Try it
transition-timing-function
CSS 屬性用於表示各個被動畫特效影響的屬性的區間值計算方式。
這個互動式範例存放在 GitHub 專案中,如果你想貢獻,請 Clone https://github.com/mdn/interactive-examples 並發送 PR。
本質上,這個屬性讓你使用加速度曲線來表示動畫變換的速度。
而每個可以動畫化的屬性使用一個 <timing-function>
(en-US) 作為加速度曲線。
你也許有許多時間函數,而你可以透過使用 transition-property
(en-US) 屬性來個別設置。如果有前述清單的數量超過時間函數的數量,則會使用預設值 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>
- 每個
<timing-function>
(en-US) 連結到對應的動畫化屬性,請參考transition-property
(en-US)。
公式語法
<easing-function># (en-US)where
<easing-function> = linear | (en-US) <cubic-bezier-timing-function> | (en-US) <step-timing-function>
where
<cubic-bezier-timing-function> = ease | (en-US) ease-in | (en-US) ease-out | (en-US) ease-in-out | (en-US) cubic-bezier(<number [0,1]>, <number> (en-US), <number [0,1]>, <number> (en-US))
<step-timing-function> = step-start | (en-US) step-end | (en-US) steps(<integer> (en-US)[ (en-US), <step-position>] (en-US)? (en-US))where
<step-position> = jump-start | (en-US) jump-end | (en-US) jump-none | (en-US) jump-both | (en-US) start | (en-US) end
範例
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)
規格
規格 | 狀態 | 備註 |
---|---|---|
CSS Transitions The definition of 'transition-timing-function' in that specification. |
Working Draft | 初始定義 |
預設值 | ease |
---|---|
Applies to | all elements, ::before (en-US) and ::after (en-US) pseudo-elements |
繼承與否 | no |
Computed value (en-US) | as specified |
Animation type | discrete |
相容性
BCD tables only load in the browser