transition-timing-function

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

嘗試一下

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

而每個可以動畫化的屬性使用一個 <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)

公式語法

transition-timing-function = 
<easing-function># (en-US)

<easing-function> =
linear | (en-US)
<linear-easing-function> | (en-US)
<cubic-bezier-easing-function> | (en-US)
<step-easing-function>

<linear-easing-function> =
linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
ease | (en-US)
ease-in | (en-US)
ease-out | (en-US)
ease-in-out | (en-US)
cubic-bezier( <number [0,1]> (en-US) , <number> (en-US) , <number [0,1]> (en-US) , <number> (en-US) )

<step-easing-function> =
step-start | (en-US)
step-end | (en-US)
steps( <integer> (en-US) [ (en-US), <step-position> ] (en-US)? (en-US) )

<linear-stop-list> =
[ (en-US) <linear-stop> ] (en-US)# (en-US)

<step-position> =
jump-start | (en-US)
jump-end | (en-US)
jump-none | (en-US)
jump-both | (en-US)
start | (en-US)
end

<linear-stop> =
<number> (en-US) && (en-US)
<linear-stop-length>? (en-US)

<linear-stop-length> =
<percentage> (en-US){1,2} (en-US)

範例

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)

規格

Specification
Unknown specification
# transition-timing-function-property
預設值 (en-US)ease
Applies toall elements, ::before (en-US) and ::after (en-US) pseudo-elements
繼承與否no
Computed value (en-US)as specified
Animation typediscrete

相容性

BCD tables only load in the browser

看更多