Line Drawing (線條繪製)

先以描邊畫出字母輪廓，再顯示填色。

在[套用位置]加入「文字描邊繪製」(Stroke Text Draw) 效果，也叫 draw in text 或 animated stroke text。
字母輪廓流暢地逐筆畫出，輪廓完成後填色再淡入。
頁面載入時只播放一次，讓文字保持為可存取的真實文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示已填色的文字。

勾選時，方塊內的勾號一筆一筆地畫出來。

在[套用位置]加入「核取方塊打勾」(Checkbox Check Draw) 動畫，也叫動畫核取方塊 (animated checkbox) 或勾號繪製 (checkmark draw)。
勾選時，方塊填滿顏色，勾號以一筆快速流暢的線條自己畫出來；取消勾選時以同樣方式擦除。
保持它是帶有勾選狀態的真正核取方塊，可以用鍵盤操作，並有清楚可見的焦點框。

圓圈和勾號自行畫出，確認操作已成功。

在[套用位置]加入「成功打勾」(Success Checkmark) 動畫，也叫 animated success tick。
先用一筆流暢的線條畫出圓圈，接著在圓圈內畫出勾號，整個圖示再輕輕彈一下：沉穩、篤定。
操作成功時只播放一次，搭配螢幕閱讀器能唸出的文字訊息；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的圖示。

懸停時，連結下方的底線從一側或中間延伸出來。

在[套用位置]加入「底線繪製」(Underline Draw) 懸停效果，也叫動畫底線 (animated underline) 或懸停底線動畫 (hover underline animation)。
游標停在連結上時，文字下方的底線從左到右平順延伸，游標移開後再收回：快速而含蓄。
不要讓底線推擠周圍版面，並且在鍵盤焦點時呈現同樣的效果。

元素沿著自訂曲線路徑移動，並可隨路徑旋轉方向。

在[套用位置]加入「路徑動畫」(Motion Path)，也叫 animate along path。
一個小元素沿著自訂曲線路線緩慢、等速地移動，並隨時轉向前進的方向。
使用封閉路線，讓循環重複時不會跳動；路線要隨容器縮放，而不是固定尺寸。

小圓點或圖示沿著圓形軌道繞中心旋轉。

在[套用位置]加入「軌道環繞」(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圓點沿著圓形軌道緩慢、等速地繞中心元素旋轉，外圈則以更慢的速度反向旋轉。
循環要無縫，環繞的元素始終保持正立；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止旋轉。

一個向量形狀平順地變成另一個形狀。

在[套用位置]加入「形狀變形」(Shape Morph)，也叫路徑變形 (path morphing) 或 SVG morph。
一個形狀平順地變成另一個形狀，例如五邊形向內收縮成星形，各個點以均勻、從容的節奏滑到定位。
讓兩個形狀擁有數量相同且一一對應的點，使變形乾淨、不閃爍；每次狀態改變時播放一次，不要循環。