6.4-transition-timing-function.md

7.4 transition-timing-function

說明

transition-timing-function 與 animation-timing-function 的觀念一模一樣。

我們先認識 ease(預設)、linear、ease-in、ease-out、ease-in-out 這五個。

語法

transition-timing-function: ease;

如果要各別指定，以逗號分隔即可，例：

transition-timing-function: ease, ease-in;

範例

觀察 ease(預設)、linear、ease-in、ease-out、ease-in-out 時間與進度的效果：

{% embed url="https://codepen.io/carlos411/pen/yLGBMov" %}