transition-timing-function
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
transition-timing-function
CSS 屬性用於表示各個被動畫特效影響的屬性的區間值計算方式。
嘗試一下
本質上,這個屬性讓你使用加速度曲線來表示動畫變換的速度。
而每個可以動畫化的屬性使用一個 <timing-function>
作為加速度曲線。
你也許有許多時間函數,而你可以透過使用 transition-property
屬性來個別設置。如果有前述清單的數量超過時間函數的數量,則會使用預設值 ease
;如果少於那多餘的時間函數會被忽略,在這兩種情況,CSS 宣告總會有效。
語法
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.1);
transition-timing-function: frames(10);
/* 多個函數 */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 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>
連結到對應的動畫化屬性,請參考transition-property
。
公式語法
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
範例
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 |
---|
CSS Transitions # transition-timing-function-property |
預設值 | ease |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
繼承與否 | no |
Computed value | as specified |
Animation type | Not animatable |
相容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transition-timing-function | ||||||||||||
jump- keywords for steps() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.