瞭解如何柔化動畫並為動畫設定權重。
大自然中的任何物件都不會從某個點線性移動。實際上，物體會隨著移動而加速或減速。我們的大腦會彼此互相關聯，因此製作動畫時，建議您善用這一點。自然動態效果可讓您的使用者更熟悉應用程式，進而提升整體體驗。
摘要
- 加/減速可讓動畫看起來更自然。
- 為 UI 元素選擇簡化式動畫。
- 除非內容長度不長，否則請避免使用簡易或簡化的動畫。他們往往會感覺到會拖累使用者
在經典動畫中，緩慢開始並加速動作的意思是「慢速」。如果是能快速開始且減速的動作，則會「慢速」。網路上最常用於這類術語的詞彙「易於操作」和「緩解」。有時這兩種工具會合而為一，稱為「緩出」。簡單來說，就是降低動畫嚴重度或發音的過程。
加/減速關鍵字
CSS 轉場效果和動畫都能讓您選擇要在動畫中使用的加/減速類型。您可以使用會影響動畫的加/減速 (或 timing，因為有時稱為) 的關鍵字。你也可以完全自訂加/減速，以更自由的方式展現應用程式特色。
以下是可在 CSS 中使用的部分關鍵字：
linearease-inease-outease-in-out
資料來源：CSS 轉場效果、W3C
您也可以使用 steps 關鍵字來建立包含獨立步驟的轉場效果，但上述關鍵字最適合用來建立感覺自然的動畫。
線性動畫
不含任何加/減速的動畫稱為「線性」。直線轉場的圖表如下所示：
隨著時間的推移，值也會以等量增加。使用線性運動時，一般人會感到機械性與自然不尋常，因此會讓使用者感到奇異。一般而言，請避免使用線性動作。
無論您是使用 CSS 或 JavaScript 來編寫動畫，都一定會有線性動作選項。
為了透過 CSS 達成上述效果，程式碼看起來會像這樣：
transition: transform 500ms linear;
加速播放動畫
減去會讓動畫開始的速度比線性動畫更快，最終也會減慢。
緩和動作通常最適合使用者介面工作，因為快速啟動會讓動畫具有回應速度，同時又能使動畫結束時自然變慢。
要達到簡化效果的方法有很多種，但最簡單的做法是在 CSS 中使用 ease-out 關鍵字：
transition: transform 500ms ease-out;
加速播放動畫
以下動畫與簡易播放動畫相反，加速播放動畫開始並快速結束。
這種動畫就像一片重石掉落的石頭，一開始會緩慢起步，並伴隨點滴躍出地面快速彈在地。
然而，從互動點的觀點來看，緩解措施可能會因為突發性而出現一些不尋常的狀況。現實世界中變動的東西往往會減慢，而不是單純突然停下來。緩解措施也會造成一開始速度遲緩的負面影響，對網站或應用程式回應速度的觀感造成負面影響。
如要使用簡化式動畫 (類似於緩解和線性動畫)，可以使用她的關鍵字：
transition: transform 500ms ease-in;
退出動畫
上下拉動操作與加速和減速汽車十分類似，而謹慎使用可為車輛帶來更大的震撼力，而不只是單純的加/減速效果。
請勿使用過於冗長的動畫時間長度，因為暫停開始就出現畫面緩慢。300 至 500 毫秒的間隔通常比較合適，但實際數字仍完全取決於專案感受。不過，由於影片開頭、中段和慢速等緩慢，因此動畫的對比度增加了，因此對使用者來說非常實用。
如要取得簡化式動畫，可以使用 ease-in-out CSS 關鍵字：
transition: transform 500ms ease-in-out;