animation-timing-function

animation-timing-function

文法：

animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

預設值：ease

适用于：所有元素，包含僞對象:after和:before

繼承性：無

動畫性：否

計算值：指定值

媒體：視覺

取值：

linear：

線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：

平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：

由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：

由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：

由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

step-start：

等同于 steps(1, start)

step-end：

等同于 steps(1, end)

steps(<integer>[, [ start | end ] ]?)：

接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，預設值為end。

cubic-bezier(<number>, <number>, <number>, <number>)：

特定的貝塞爾曲線類型，4個數值需在[0, 1]區間内

說明：

• 如果提供多個屬性值，以逗号進行分隔。
• 對應的腳本特性為animationTimingFunction。