瞭解如何讓動畫更柔和，並為動畫設定權重。
自然界中沒有任何事物會以線性方式從一個點移動到另一個點。在現實中，物體在移動時通常會加速或減速。我們的大腦會預期這種動作，因此在製作動畫時，您應善用這一點。自然的動作可讓使用者更自在地使用應用程式，進而帶來更優質的整體體驗。
摘要
- 緩和效果可讓動畫看起來更自然。
- 為 UI 元素選擇漸弱動畫。
- 除非內容簡短，否則請避免使用簡易或簡化的動畫，因為這類動畫往往會讓使用者感覺疲乏。
在經典動畫中，緩慢開始並加速動作的詞元是「慢入」，對於迅速開始及減速的動作則稱為「減速」。網站上最常用來描述這類效果的術語分別是「ease in」和「ease out」。有時這兩種工具會合而為一，稱為「緩出」。簡單來說，就是降低動畫嚴重度或發音的過程。
緩和關鍵字
您可以使用 CSS 轉場效果和動畫，選擇要為動畫使用的加/減速類型。您可以使用會影響動畫的加/減速 (或 timing，因為有時稱為) 的關鍵字。您也可以完全自訂漸變效果，更自由地展現應用程式的個性。
以下是可在 CSS 中使用的部分關鍵字：
linearease-inease-outease-in-out
資料來源：CSS 轉場效果、W3C
您也可以使用 steps 關鍵字來建立包含獨立步驟的轉場效果，但上述關鍵字最適合用來建立感覺自然的動畫。
線性動畫
沒有任何緩和效果的動畫稱為「線性」。線性轉換的圖表如下所示：
隨著時間的推移，值也會以等量增加。使用線性運動時，一般人會感到機械性與自然不尋常，因此會讓使用者感到奇異。一般來說，請避免使用線性動作。
無論您是使用 CSS 還是 JavaScript 編寫動畫程式碼，都會發現有線性動作選項。
如要使用 CSS 達成上述效果，程式碼會像這樣：
transition: transform 500ms linear;
Ease-out 動畫
緩和結束會讓動畫的開始速度比線性動畫更快，且在結束時會減速。
在使用者介面工作中，通常以漸弱效果最為合適，因為快速開始可讓動畫呈現出有回應的效果，同時還能讓動畫在結尾自然減速。
您可以透過多種方式實現漸弱效果，但最簡單的方法是使用 CSS 中的 ease-out 關鍵字：
transition: transform 500ms ease-out;
漸進動畫
以下動畫與簡易播放動畫相反，加速播放動畫開始並快速結束。
這種動畫就像重石掉落，一開始緩慢，最後快速撞地，發出沉悶的聲響。
不過，從互動角度來看，先加速後減速的效果會因為突然結束而顯得有些不自然，因為真實世界中的物體移動時，通常會先減速，而非突然停止。緩入動畫也會造成負面影響，讓使用者在開始時覺得速度很慢，進而影響他們對網站或應用程式回應速度的看法。
如要使用 ease-in 動畫，您可以使用其關鍵字，這與 ease-out 和線性動畫類似：
transition: transform 500ms ease-in;
退出動畫
緩慢進入和緩慢退出效果就像汽車的加速和減速，如果使用得當，比起單純的緩慢退出效果，還能帶來更強烈的效果。
請勿使用過於冗長的動畫時間長度，因為暫停開始就出現畫面緩慢。300 至 500 毫秒的間隔通常比較合適，但實際數字仍完全取決於專案感受。不過，由於影片開頭、中段和慢速等影格的緩慢情形發生，因此動畫的對比度增加了，因此對使用者來說非常實用。
如要取得簡化式動畫，可以使用 ease-in-out CSS 關鍵字：
transition: transform 500ms ease-in-out;