網頁動效，即時示範。提示詞，一鍵複製。

元素從縮小且偏移的狀態開始，滑入後放大到完整尺寸。

在[套用位置]加入「回拉入場」(Back In) 進場動畫，也叫 back in up 或 back in down。
元素以縮小且略微透明的狀態從邊緣外進來，到達位置後再放大到完整尺寸：一個刻意的兩段式動作，而不是快速彈出。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素縮小並滑向一側邊緣，同時淡出。

在[套用位置]加入「回拉出場」(Back Out) 退場動畫。
元素先在原地稍微縮小，再滑向一側邊緣並淡出：一個刻意的兩段式退場，而不是一次快速淡出。
等動畫結束後再移除元素，避免版面在動畫中途跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即移除。

元素從嚴重模糊的狀態逐漸變清晰，常伴隨滑入或淡入。

在[套用位置]加入「模糊入場」(Blur In) 進場動畫，也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始，在原地逐漸變清晰：柔和、偏慢，沒有位移。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示清晰的文字。

元素在淡出或滑出的同時逐漸變模糊。

在[套用位置]加入「模糊出場」(Blur Out) 退場動畫，也叫 text blur out 或 smoky text dissipate。
內容在原地越來越模糊並逐漸淡出：柔和、偏慢，彷彿消散一般。
等模糊效果結束後再隱藏或移除元素；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素以超出後回落的彈跳方式進場，可以是放大出現，也可以從邊緣落下。

在[套用位置]加入「彈跳入場」(Bounce In) 進場動畫，也叫 bounce in down 或 bounce in up。
元素從小逐漸放大，略微超過完整尺寸後晃動幾下再穩定下來：快速、有彈性。
只播放一次，以免一直搶走注意力；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素輕輕彈一下，然後縮小消失或從邊緣飛出。

在[套用位置]加入「彈跳出場」(Bounce Out) 退場動畫。
元素先輕輕下沉，再略微脹大超過原尺寸，然後一邊縮小一邊淡出：短促、有彈性。
等動畫結束後再將它從版面中移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

clip-path 或遮罩從邊緣或某一點展開，逐步露出圖片或文字。

在[套用位置]加入「裁切顯現」(Clip Reveal) 進場效果，也叫 mask reveal、wipe reveal 或 image reveal。
讓裁切邊緣由左往右掃過，內容保持不動、逐步顯露出來：流暢，開始和結束都要柔和。
從一開始就為元素保留空間，避免版面移動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接完整顯示。

元素在原位從完全透明變為完全不透明，離開時則反過來。

在[套用位置]加入「淡入/淡出」(Fade In / Fade Out) 動畫，也叫 fade。
元素出現時在原位從完全透明變為完全可見，離開時以同樣方式淡出：柔和，不要位移或縮放。
淡出後要確保它無法再被點擊或用鍵盤聚焦；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就瞬間切換。

元素從一側移動一小段距離到最終位置，同時淡入。

在[套用位置]加入「方向淡入」(Fade In Directional) 進場動畫，也叫 fade in left、fade in right 或 fade in down。
元素從一側移動一小段距離到最終位置，同時淡入：快速流暢，到位時減速，不要彈跳。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素朝一個方向移開，同時淡出。

在[套用位置]加入「方向淡出」(Fade Out Directional) 退場動畫，也叫 fade out up 或 fade out down。
元素朝一個方向移動一小段距離並淡出：快速，離開時逐漸加速。
等淡出結束後再將它從版面中移除，避免相鄰內容提前跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素在淡入的同時向上移動一小段距離，彷彿落到自己的位置上。

在[套用位置]加入「上浮淡入」(Fade Up) 進場動畫，也叫 fade-in-up 或捲動顯現 (reveal on scroll)。
元素第一次捲動進入畫面時，一邊輕微上移一邊淡入：要含蓄、快速，不要有彈跳感。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

元素像故障的霓虹燈一樣快速閃爍幾下，然後保持可見。

在[套用位置]加入「閃爍入場」(Flicker In) 進場動畫。
元素像故障的霓虹燈一樣，以不規則的間隔亮滅幾次後保持點亮：俐落的閃爍，沒有位移。
只播放一次，閃爍次數要少、速度不能太快，確保對光敏感的人也安全；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以恆亮狀態顯示。

元素繞 Y 軸旋轉一整圈，同時稍微靠近觀看者再退回。

在[套用位置]加入「翻轉」(Flip) 動畫。
元素繞垂直軸旋轉一整圈，同時稍微靠近觀看者，然後尺寸微微一縮再回到原位：活潑但簡短。
加上透視 (perspective) 讓旋轉有縱深感，只播放一次、不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就省略旋轉。

元素繞水平軸或垂直軸做 3D 旋轉，從側面朝向轉為正對觀看者。

在[套用位置]加入「翻轉入場」(Flip In) 進場動畫，也叫 flip in X 或 flip in Y。
元素從側面朝向開始，繞水平軸旋轉到正對觀看者，略微轉過頭再回來後穩定：快速，帶一點晃動。
加上透視 (perspective) 讓旋轉有縱深感；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以正面狀態顯示、不做動畫。

元素做 3D 旋轉，直到側面朝向、看不見為止。

在[套用位置]加入「翻轉出場」(Flip Out) 退場動畫，也叫 flip out X 或 flip out Y。
元素先稍微向後傾斜，再繞垂直軸旋轉到側面朝向並消失：快速、俐落。
加上透視 (perspective) 讓旋轉有縱深感，等旋轉結束後再移除元素；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素以左上角為鉸鏈擺動、晃盪幾下，然後掉出螢幕。

在[套用位置]加入「鉸鏈掉落」(Hinge) 退場動畫。
元素像螺絲鬆脫一樣以左上角為軸向下擺，來回晃盪，然後一邊淡出一邊掉出螢幕：緩慢、逗趣、刻意。
讓它從其他內容上方掉落，不要擠動版面或產生捲軸，掉落後移除元素；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素從縮小且傾斜的狀態彈出，略微超出後穩定下來，就像驚奇箱裡的彈簧小丑。

在[套用位置]加入「玩偶盒彈出」(Jack In The Box) 進場動畫。
元素以底邊為支點，從很小且傾斜的狀態彈出，越過直立位置左右搖擺，然後穩定下來：有彈性、俏皮。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素帶著傾斜從側面疾速衝入，落定時恢復端正。

在[套用位置]加入「光速入場」(Light Speed In) 進場動畫，也叫 lightspeed in。
元素像高速飛馳般傾斜著從側面疾速衝入，傾斜先反向過頭一次，落定時恢復端正：快速且具戲劇性，結尾減速。
元素還在畫面外時不要產生水平捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素傾斜著向側面疾速離開，同時淡出。

在[套用位置]加入「光速出場」(Light Speed Out) 退場動畫，也叫 lightspeed out。
元素傾斜著向側面疾速離開，同時淡出：要快，離開時逐漸加速。
越過邊緣時不要產生水平捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素從放大、模糊、透明的狀態縮小到清晰，像一團煙霧聚攏；離開時則反向進行。

在[套用位置]加入「煙霧入場/出場」(Puff In / Puff Out) 動畫，也叫 puff。
出現時，元素從放大、模糊、透明的狀態縮小到清晰，像一團煙霧緩緩落定；離開時再膨脹成一片模糊並消失：柔和、偏快。
放大狀態不要擠動版面或產生捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換。

元素像輪子一樣從左側滾入，同時淡入。

在[套用位置]加入「翻滾入場」(Roll In) 進場動畫。
元素像輪子一樣邊轉動邊從左側滾入，同時淡入：流暢，落定時減速。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素向右滾出，同時淡出。

在[套用位置]加入「翻滾出場」(Roll Out) 退場動畫。
元素像輪子一樣邊轉動邊向右滾出，同時淡出：流暢，離開時加速。
等它完全滾走後再從版面中移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素繞某個角或自身中心旋轉進場，同時淡入。

在[套用位置]加入「旋轉入場」(Rotate In) 進場動畫，也叫 rotate in down left。
元素從傾斜的角度出發，繞左下角旋轉到定位，同時淡入：流暢、從容，落定時逐漸減速。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素繞一個支點旋轉，同時淡出消失。

在[套用位置]加入「旋轉出場」(Rotate Out) 退場動畫。
元素繞自身中心旋轉略多於半圈，同時淡出：流暢，逐漸加速。
旋轉結束後再移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素從容器邊緣之外滑入到停靠位置，不帶淡入效果。

在[套用位置]加入「滑入」(Slide In) 進場動畫，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素從容器邊緣之外滑到停靠位置，全程保持完全不透明：快速，平順減速，不要回彈。
在容器邊緣處裁切，避免它在外面時蓋住相鄰元素或產生捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示。

元素滑出容器邊緣後消失。

在[套用位置]加入「滑出」(Slide Out) 退場動畫，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器邊緣後消失：快速，離開時加速。
在容器邊緣處裁切，離開畫面後對鍵盤和螢幕閱讀器也隱藏；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

一組元素依序以微小的時間差播放動畫，形成波浪般的效果，而不是同時出現。

在[套用位置]加入「交錯動畫」(Stagger)，也叫 staggered animation 或級聯 (cascade)。
讓各項以短而均勻的間隔依序上浮出現，整體看起來像一道快速的波浪，而不是同時出現。
即使清單很長也要讓整個過程保持簡短；捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

元素從一個點旋轉放大，同時淡入。

在[套用位置]加入「迴旋入場」(Swirl In) 進場動畫，也叫 swirl in forward。
元素從一個點放大到完整尺寸，同時旋轉遠超過一整圈並淡入：一開始很快，落定時逐漸減速。
只對單一元素播放一次，不要套用在整組元素上；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

字母起初間距很寬且較淡，接著在顯現的同時收攏到正常字距。

在[套用位置]加入「字距入場」(Tracking In) 文字動畫，也叫 text tracking in 或 letter-spacing in。
字母起初間距很寬且較淡，接著逐漸收攏到正常字距並完全顯現：流暢，結尾減速。
字距變化期間讓文字保持置中且不換行，避免周圍版面位移；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以正常字距顯示。

元素從小而透明的狀態放大到完整尺寸，同時淡入。

在[套用位置]加入「縮放入場」(Zoom In) 進場動畫，也叫 scale in。
元素從小而透明放大到完整尺寸，同時淡入：快速、流暢，不要放大過頭再縮回。
以中心為基準縮放，不影響周圍版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素縮小並淡出，直到消失。

在[套用位置]加入「縮放出場」(Zoom Out) 退場動畫，也叫 scale out。
元素朝中心縮小並淡出，直到消失：快速，逐漸加速。
完全消失後再從版面和鍵盤焦點中移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素上下彈跳，彈跳幅度逐漸減小。

在[套用位置]加入「彈跳」(Bounce) 提示效果。
元素向上跳起再落下，快速彈跳幾次，每次幅度越來越小，落地時稍微壓扁。
觸發時只播放一次，不要循環；對開啟了「減少動態效果」的使用者則略過。

元素透過快速切換不透明度來閃爍。

在[套用位置]加入「快閃」(Flash) 提示效果，也叫 blink。
元素快速淡出再淡入，閃爍兩次，然後保持完全可見。
只播放一次，不要無止盡地閃爍；快速閃爍可能讓人不舒服，所以對開啟了「減少動態效果」的使用者則略過。

元素的不透明度像接觸不良的燈一樣不規則地閃動。

在[套用位置]加入「閃爍」(Flicker) 效果，也叫 flickering。
元素大部分時間保持穩定，偶爾像接觸不良的霓虹燈一樣短促、不均勻地變暗。
節奏要不規則而非等間隔，避免全強度的快速閃爍；對開啟了「減少動態效果」的使用者則停止。

元素帶著輕微旋轉左右擺動，就像搖頭表示「不」。

在[套用位置]加入「搖頭」(Head Shake) 提示效果，也叫 headshake 或 no shake。
元素要像搖頭表示「不」一樣，帶著輕微扭轉快速左右轉動，每次幅度都比上一次小，最後停穩。
每次觸發時只播放一次（例如操作遭拒時），並且不要讓周圍的版面跟著移動。

元素以雙拍節奏縮放，就像跳動的心臟。

在[套用位置]加入「心跳」(Heartbeat) 效果，也叫 heart beat。
元素要快速地連續膨脹、回縮兩次，接著稍作停頓再開始下一次，就像跳動的心臟。
無縫循環播放並保留兩次心跳之間的停頓；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。

元素像晃動的果凍一樣來回傾斜變形，幅度逐漸減小。

在[套用位置]加入「果凍晃動」(Jello) 提示效果，也叫 jelly。
元素要像晃動的果凍一樣來回傾斜變形：一開始幅度大，接著很快平息下來。
觸發時只播放一次，並維持元素佔用的空間不變，避免周圍內容位移。

元素的副本反覆放大並淡出，就像雷達波紋。

在[套用位置]加入「雷達波」(Ping) 效果，也叫 radar ping 或脈衝環 (pulse ring)。
元素的一個副本要向外擴大並淡出，以穩定的節奏一次又一次重複，而元素本身保持不動。
把圓環畫在獨立的圖層上，確保它絕不影響版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止循環。

元素反覆地輕柔縮放或淡入淡出。

在[套用位置]加入「脈動」(Pulse) 效果，也叫 pulsing。
元素要以緩慢、穩定的節奏輕輕膨脹再回縮：含蓄，不要有彈跳感。
無縫循環播放，不要讓周圍版面移動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。

元素橫向拉伸、縱向壓扁，經過幾次彈性變化後恢復原狀。

在[套用位置]加入「橡皮筋」(Rubber Band) 提示效果，也叫 rubberband。
元素要先橫向拉寬、縱向壓扁，再經過幾次越來越小的彈性回彈，最後停在正常大小。
觸發時只播放一次，並確保拉伸過程中周圍版面不會位移。

元素沿一個方向快速來回抖動。

在[套用位置]加入「抖動」(Shake) 效果，也叫 error shake 或 invalid input shake。
元素要快速左右抖動幾次，然後剛好停在起始位置：快速、俐落。
每次出錯時播放一次，不要循環；同時顯示看得見的錯誤訊息，讓意思不只靠動畫傳達。

元素以固定速度持續旋轉。

在[套用位置]加入「持續旋轉」(Spin) 效果，也叫 spinner 或 rotate loop。
元素要以固定、均勻的速度持續旋轉，每圈之間不要有緩動。
讓循環無縫銜接，為 spinner 加上無障礙的「載入中」標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就放慢或停止旋轉。

元素以頂邊為支點，像鐘擺一樣來回擺盪，幅度逐漸減小。

在[套用位置]加入「擺盪」(Swing) 提示效果。
元素要像懸掛的招牌一樣來回擺盪，一開始擺幅很大，接著很快平息。
以頂邊而不是中心為支點擺盪，觸發時只播放一次。

元素放大後帶著旋轉左右晃動，再恢復原本大小，像在慶祝一樣。

在[套用位置]加入「慶祝晃動」(Tada) 提示效果。
元素要先微微縮小，再放大並快速傾斜著左右晃動，然後恢復正常大小，像一次小小的慶祝。
只播放一次（例如在操作成功後立刻播放）；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就略過這個動畫。

元素向各個方向快速地細微顫動，就像手機在震動。

在[套用位置]加入「震動」(Vibrate) 提示效果，也叫 buzz 或 vibration。
元素要像手機震動一樣，朝不同方向快速地細微顫動片刻，然後停下來。
動作幅度要非常小，確保內容依然清楚好讀；每次提醒只播放一次，不要循環。

元素像不穩的物體一樣，帶著傾斜左右搖晃。

在[套用位置]加入「搖晃」(Wobble) 提示效果。
元素要帶著傾斜左右搖晃，一開始幅度很大，每擺一次就變小，直到停穩。
觸發時只播放一次，並避免相鄰內容位移。

向下捲動時頁首隱藏，向上捲動時重新出現。

在[套用位置]加入「捲動隱藏頁首」(Hide on Scroll Header)，也叫 headroom 或自動隱藏導覽列 (auto-hide navbar)。
使用者向下捲動時，頁首要向上滑出畫面；只要向上捲動，就滑回來：快速、流暢，依捲動方向而不是距離來反應。
在頁面最上方時一律顯示，忽略細微的捲動抖動，並且當頁首內有元素取得鍵盤焦點時保持顯示。

縱向捲動時，一排被固定的面板橫向移動。

在[套用位置]加入「橫向捲動區塊」(Horizontal Scroll Section)，也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
區塊到達頂端時要固定住，向下捲動時讓其中的一排面板橫向移動，最後一個面板出現後再解除固定。
橫向移動要直接跟著捲動位置，往回捲動時反向移動；在小螢幕上，或如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改成可以正常滑動的橫排。

捲動時各圖層以不同速度移動，營造出景深感。

在[套用位置]加入「視差捲動」(Parallax) 效果，也叫 parallax scrolling 或視差圖層 (parallax layers)。
頁面捲動時，背景圖層要比內容移動得慢，越遠的圖層移動越少，營造含蓄的景深感。
讓效果緊跟捲動位置、沒有延遲，文字放在正常速度的圖層上；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉這個效果。

在一段捲動範圍內，元素固定在原位，其他內容或動畫繼續推進。

在[套用位置]加入「捲動釘選」(Pinning) 效果，也叫釘選區塊 (pinned section) 或 sticky section。
旁邊的內容隨捲動經過時，一個面板要固定在原位，並隨正在閱讀的步驟切換內容，區塊結束時再解除固定。
優先使用原生的 sticky 定位，而不是攔截捲動；並確保在小螢幕上即使沒有固定面板，每個步驟也依然好讀。

隨著使用者捲動頁面或文章，進度條或圓環逐漸填滿。

在[套用位置]加入「捲動進度指示器」(Scroll Progress Indicator)，也叫閱讀進度條 (reading progress bar)。
頂端的一條細條要隨著讀者捲動的距離從左往右填滿，到結尾時佔滿整個寬度。
直接綁定捲動位置，不要有緩動延遲，也不要遮住內容。

捲動停止時會吸附到預設的位置，例如投影片或區塊。

在[套用位置]加入「捲動吸附」(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
捲動停下時，畫面要俐落地吸附到最近的區塊，讓每個區塊都對齊邊緣，而不是停在一半。
使用瀏覽器原生的吸附功能，讓滑鼠滾輪、觸控和鍵盤捲動都照常運作，並確保比畫面更高的內容也能完整閱讀。

動畫進度直接綁定捲動位置，往下捲動時播放，往回捲動時倒轉。

在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation)，也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置：往下捲動時正向播放，往上捲動時當場倒轉，本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示一個合理的靜態狀態。

元素進入或離開可視區域時，動畫播放一次。

在[套用位置]加入「捲動觸發動畫」(Scroll-Triggered Animation)，也叫捲動顯現 (reveal on scroll) 或 animate on scroll。
每個元素進入畫面時只播放一次：淡入並往上滑到定位，用自己快速流暢的節奏播放，而不是跟著捲動位置。
腳本載入失敗時內容也要看得到；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示元素。

捲動和錨點跳轉帶有緩動地平滑滑動，而不是生硬地跳動。

在[套用位置]加入「平滑捲動」(Smooth Scroll)，也叫 smooth scrolling 或慣性捲動 (inertia scroll)。
捲動和錨點跳轉要順暢地滑動並緩緩停下，而不是一格一格地跳；手感要輕快靈敏，不要沉重拖泥帶水。
保留鍵盤捲動、捲軸、頁面內搜尋等原生行為；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉平滑效果。

捲動時卡片固定在頂端並層層疊起，先前的卡片通常會稍微縮小。

在[套用位置]加入「堆疊卡片」(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
捲動時，每張卡片固定在頂端附近，下一張卡片從下方滑上來蓋住它，底下的卡片稍微縮小，疊成整齊的一疊。
讓每張先前的卡片露出一道細邊，並給最後一張卡片留足空間，讓它在區塊結束前滑到定位。

使用者往下捲動後，固定頁首的高度或尺寸會縮小。

在[套用位置]加入「固定頁首縮小」(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
頁首固定在頂端，讀者稍微往下捲動後，平順地縮成更窄的橫條、Logo 也變小；回到頂端時再恢復原狀。
頁首尺寸變化時，不要讓下方內容跳動。

頁面縱向捲動時，大字級的文字列橫向滑動。

在[套用位置]加入「捲動文字跑馬燈」(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
頁面往下捲動時，大字級的文字列橫向滑動，相鄰的列朝相反方向移動；往上捲動時再滑回來。
讓移動綁定捲動位置，別讓長文字列產生水平捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

隨著使用者捲動，元素或場景放大或縮小。

在[套用位置]加入「捲動縮放」(Zoom on Scroll) 效果，也叫 scroll zoom 或 scale on scroll。
區塊停留在畫面中時，元素要隨著捲動從一張小卡片平順放大，直到佔滿整個畫面；往上捲動時再縮回去。
縮放時不要推擠周圍的版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以最終尺寸顯示，不做縮放。

文字以漸層填色，顏色持續變換或流動。

在[套用位置]加入「動態漸層文字」(Animated Gradient Text) 效果，也叫極光文字 (aurora text) 或 rainbow text sweep。
文字以漸層填色，顏色在文字上緩慢、流暢地流動，無縫地無限循環。
任何時刻文字都要在背景上清楚易讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就讓顏色保持靜止。

文字像訊號故障一樣抖動，出現切片錯位和紅青色分離。

在[套用位置]加入「故障文字」(Glitch Text) 滑鼠懸停效果，也叫 text glitch 或 RGB 分離故障 (RGB split glitch)。
游標停在文字上時，文字以快速、俐落的陣發方式抖動：細細的橫向切片左右跳動，兩份彩色副本像訊號故障一樣錯開；游標移開後恢復原狀。
真正的文字在文件中只保留一份，避免螢幕報讀器讀出副本；鍵盤聚焦時也顯示同樣的效果。

文字呈現流轉的彩虹箔片反光，隨游標或時間移動。

在[套用位置]加入「全像文字」(Holographic Text) 滑鼠懸停效果，也叫全像箔片文字 (holographic foil text)。
游標停在文字上時，一道箔片般的彩色光帶在字母上緩慢、流暢地來回滑動；游標移開後，文字恢復原本的樸素樣子。
光澤流動的任何時刻文字都要清楚易讀；鍵盤聚焦時也顯示同樣的效果。

文字不再是靜態文案，而是作為運動的圖形元素縮放、移動或旋轉。

在[套用位置]加入「動態文字排版」(Kinetic Typography)，也叫 kinetic text。
一列列重複的大字級文字以緩慢、穩定的節奏交替朝相反方向橫向滑動，讓文字本身變成運動的圖形。
每一列都要無縫循環、看不出跳接，螢幕報讀器只讀一次文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止運動。

滑鼠懸停時字母四散飛開再歸位，或在進場時向外迸散。

在[套用位置]加入「字母飛散」(Letter Scatter) 滑鼠懸停效果，也叫 scatter gather letters 或 explosive letter burst。
游標移到文字上時，每個字母帶著一點旋轉朝各自方向飛出一小段；游標移開後再流暢地聚回原來的單字。
字母移動時，單字在版面中佔的位置保持不變，螢幕報讀器要把它當成一個字來讀；鍵盤聚焦時也顯示同樣的效果。

字母後方的條紋或錯位陰影朝一個方向移動。

在[套用位置]加入「線條陰影文字」(Line Shadow Text) 效果，也叫 text shadow animation 或 dancing shadow。
字母後方由細斜條紋組成的錯位陰影緩慢、持續地滑動，字母本身保持靜止、清晰。
條紋的移動要無縫循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就讓陰影保持靜止。

字母中注入不斷上升、起伏蕩漾的液體。

在[套用位置]加入「液體填充文字」(Liquid Fill Text) 效果，也叫 water fill text。
外框字母中注滿液體，波浪狀的液面橫向翻滾，液位緩慢地起伏，形成柔和、連續的循環。
單字要保留為真正的文字供螢幕報讀器讀取；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就讓液體停在一個靜止的液位。

文字從一條裁切線後方向上滑出，彷彿憑空出現。

在[套用位置]加入「遮罩文字顯現」(Mask Reveal) 文字進場效果，也叫行遮罩顯現 (line mask reveal) 或文字遮罩 (text masking)。
每一行文字從一條看不見的邊緣後方向上滑出，彷彿憑空出現，一行接一行，快速流暢，不要有彈跳感。
文字捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示文字、不做動畫。

綠色字元像《駭客任務》裡的程式碼雨一樣成列落下。

在[套用位置]加入「駭客任務字雨」(Matrix Text) 效果，也叫 digital rain text。
一列列字元以略有差異的速度穩定落下，每列最前面的字元明亮，後面拖著逐漸淡去的尾跡。
把它當作對螢幕閱讀器隱藏的裝飾，保持輕量；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。

字母向下滴落、拉長，彷彿正在融化。

在[套用位置]加入「融化文字」(Melting Text) 效果。
字母緩慢向下塌陷，下方拉出滴落的液滴，彷彿正在融化，最後停在靜止的融化樣貌。
文字進入畫面時只播放一次，結束時保持文字可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不做動畫。

一個詞在同一位置模糊並融合成下一個詞。

在[套用位置]加入「文字變形」(Morphing Text) 效果，也叫 text morph。
一個詞在同一位置變模糊，以柔和、黏稠的方式融合成下一個詞，然後停留片刻再進行下一次切換。
詞語之間無縫循環，讓螢幕閱讀器把這些詞當作一般文字讀出；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止循環。

文字像霓虹燈管一樣發光，並閃爍或脈動。

在[套用位置]加入「霓虹發光文字」(Neon Glow Text) 效果，也叫霓虹招牌閃爍 (neon sign flicker) 或發光文字 (glowing text)。
文字像霓虹燈管一樣發出柔和、穩定的光，偶爾像真實招牌那樣短暫熄滅一下。
閃爍要偶爾出現而不是快速連閃，因為快速閃光可能傷害部分使用者；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持穩定發光。

使用者捲動經過各個章節時，標題的字母依序變換或移動。

在[套用位置]加入「捲動字母」(Scrolling Letters) 效果，也叫 on-scroll letter animations。
使用者捲動經過各章節時，標題的字母從左到右依序滾動到下一個字元，並直接跟隨捲動位置變化。
往上捲回時字母要滾回原樣，螢幕閱讀器要以一般文字取得目前的標題。

一道亮光反覆掃過文字。

在[套用位置]加入「微光文字」(Shimmer Text) 效果，也叫 animated shiny text 或金屬微光文字 (metallic shimmer text)。
一條光帶從左到右流暢地掃過文字，短暫停頓後再重複。
高光經過時文字仍要清楚可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

標題被切成若干水平切片，頁面捲動時切片彼此錯開、橫向移動。

在[套用位置]加入「切片文字」(Sliced Text) 效果，也叫 on-scroll sliced text。
把一個大標題切成若干水平切片，一開始對齊成完整的詞，使用者捲動時切片彼此錯開、橫向滑動。
讓錯位直接跟隨捲動位置，往回捲動時隨之還原；對螢幕閱讀器保持標題為一段完整可讀的文字。

文字沿圓周排列，並持續旋轉。

在[套用位置]加入「環形旋轉文字」(Spinning Text)，也叫環形文字 (circular text) 或 text on circle。
字母沿圓周平均排列，整個圓緩慢、等速地旋轉，循環重新開始時不能有跳動。
只向螢幕閱讀器提供一次一般文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止旋轉。

標題被拆分成字元、單字或行，以短暫延遲依序動畫進場。

在[套用位置]加入「文字拆分交錯」(Split Text Stagger) 進場效果，也叫逐字交錯 (letter stagger) 或 staggered text reveal。
把標題拆成單個字母，字母之間留出短暫延遲，依序上移並淡入，快速流暢，不要有彈跳感。
標題進入畫面時只播放一次，讓螢幕閱讀器把它當作一個完整的詞讀出；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

字元像機場航班看板一樣翻動，直到停在目標字母上。

在[套用位置]加入「翻牌文字」(Split-Flap Text) 效果，也叫翻牌看板 (text flipping board 或 flip board)。
每個字元格快速翻過字母表，直到停在目標字母上，各字元格從左到右依序停穩。
每次文字出現或變化時執行一次，只向螢幕閱讀器朗讀最終文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不翻動、直接顯示最終文字。

透過 SVG 置換濾鏡，字母邊緣像手繪一樣抖動。

在[套用位置]加入「扭動文字」(Squiggly Text) 效果，也叫 wobbly text 或 turbulence text。
字母邊緣輕微抖動，就像每秒被手工重畫好幾次：是含蓄、細碎的抖動，而不是流暢的波浪。
保持文字可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

文字固定不動，各行隨捲動進度淡入淡出。

在[套用位置]加入「固定文字淡入淡出」(Sticky Text Fade) 效果，也叫 sticky scroll text opacity fade。
該區塊捲動期間，文字區塊固定在原位，各行隨捲動進度逐行淡入淡出。
讓淡入淡出直接跟隨捲動位置，往回捲動時隨之反轉；無論透明度如何，每一行都要能被螢幕閱讀器讀到。

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

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

字母或單字繞軸做 3D 翻轉，露出背面的下一段文字。

在[套用位置]加入「3D 翻轉文字」(Text 3D Flip) 懸停效果，也叫 3D flip text reveal。
游標移到文字上時，每個字母繞水平軸做 3D 翻轉，露出另一面的新字母，一個接一個快速流暢地掃過；游標移開時再翻回來。
翻轉過程中保持文字框尺寸不變，鍵盤聚焦時也顯示同樣的效果。

文字隨捲動或游標移動自然地扭曲、起伏。

在[套用位置]加入「文字扭曲」(Text Distortion) 效果，也叫 organic text distortion。
一行文字不斷橫向流動，同時自然地扭曲、起伏，彷彿隔著流動的水去看，流動由使用者的捲動驅動。
扭曲要夠輕，確保文字可讀，在較慢的裝置上也要流暢；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉此效果。

頁面載入時，文字逐一淡入，常伴隨模糊逐漸消散，彷彿正在生成。

在[套用位置]加入「文字生成」(Text Generate) 效果。
文字逐一淡入，同時每個詞上的柔和模糊逐漸消散，彷彿文字正在生成：節奏平穩、沉靜。
頁面載入時只播放一次，讓螢幕閱讀器立即讀到完整文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

一條螢光筆般的色帶劃過詞句，將其突顯強調。

在[套用位置]加入「文字螢光筆」(Text Highlighter) 效果，也叫螢光標記 (highlight marker) 或麥克筆底線 (marker underline)。
一條螢光筆般的色帶從左到右平順地劃過關鍵詞句的背後，就像有人用筆把它畫起來。
在詞句捲動進入畫面時只播放一次，確保色帶上的文字清楚易讀，並且在詞句換成兩行時讓色帶正確跟隨。

描邊文字被跟隨指標或橫掃而過的漸層填滿或點亮。

在[套用位置]加入「文字懸停效果」(Text Hover Effect)，也叫懸停文字填色 (text fill on hover) 或漸層描邊文字懸停 (gradient outline text hover)。
文字一開始只有描邊；游標停在上面時，實色填滿從左到右平順地掃入，游標移開後再退回去。
填色前的描邊文字也要清楚易讀，並且在鍵盤焦點時呈現同樣的效果。

文字沿曲線路徑排列，並隨使用者捲動沿路徑移動。

在[套用位置]加入「路徑文字捲動」(Text Path Scroll) 效果，也叫 text path curve scroll animation。
文字排在一條曲線上，隨使用者捲動沿曲線滑動：往下捲動時前進，往上捲動時後退。
讓移動直接綁定捲動位置、沒有延遲，並讓螢幕閱讀器把它當作一般文字讀取。

一個詞被複製成許多層疊的副本，隨捲動錯開移動。

在[套用位置]加入「文字重複」(Text Repetition) 效果，也叫 repeated text scroll。
把一個詞複製成一疊更淡的描邊副本，隨使用者捲動從它身後展開，往上捲動時再收攏回去。
讓展開程度直接綁定捲動位置，並對螢幕閱讀器隱藏多餘的副本，讓這個詞只被讀一次。

原有文字以動畫方式退出，並被新的文字內容取代。

在[套用位置]加入「文字替換」(Text Replacement) 效果，也叫文字切換 (text swap)。
文字變化時，舊字元向上滑出，新字元從下方滑入，逐字形成快速而流暢的波動。
切換過程中不要讓文字框尺寸跳動，並且只向螢幕閱讀器朗讀新文字。

隨著使用者捲動，段落中的文字從黯淡變為完全不透明。

在[套用位置]加入「文字顯現」(Text Reveal) 效果，也叫捲動文字顯現 (scroll text reveal) 或逐詞顯現 (word-by-word reveal)。
段落一開始是黯淡的，隨著使用者捲動，每個詞依序亮到完全清晰，與捲動位置綁定。
往上捲回時文字重新變暗；無論黯淡程度如何，整段文字都要始終能被螢幕閱讀器讀取。

在卡片上移動游標時，遮罩邊緣或聚光燈下隱藏的文字隨之顯露。

在[套用位置]加入「文字顯現卡片」(Text Reveal Card) 效果，也叫聚光燈文字顯現 (spotlight text reveal)。
游標在卡片上移動時，一條垂直邊緣緊緊跟隨，在一側露出隱藏的文字：流暢、直接，沒有延遲。
在沒有游標可跟隨的觸控裝置上，讓拖曳或輕觸也能顯示隱藏文字，並讓隱藏文字可被螢幕閱讀器讀取。

文字被不斷刷新的隨機字元取代，並逐漸還原成最終的詞。

在[套用位置]加入「亂碼解碼文字」(Text Scramble) 懸停效果，也叫文字解碼 (text decode) 或加密文字 (encrypted text)。
游標移到文字上時，每個字母快速閃過隨機字元，再從左到右依序定格為真正的字母。
亂碼過程中文字寬度不要跳動，讓螢幕閱讀器始終讀取真實文字，並且在鍵盤焦點時呈現同樣的效果。

文字跟隨滑鼠位置以 3D 透視方式傾斜轉動。

在[套用位置]加入「文字傾斜」(Text Tilt) 效果，也叫透視文字傾斜 (perspective text tilt)。
文字隨著游標移動平順跟隨，以 3D 方式輕輕朝游標傾斜，游標移開後再緩緩恢復平整。
傾斜幅度要含蓄，確保文字易讀；在觸控裝置上，以及如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，文字保持平整不動。

字元像打字一樣逐一出現，通常後面跟著一個閃爍的游標。

在[套用位置]加入「打字機效果」(Typewriter)，也叫打字動畫 (typing animation) 或打字文字 (typing text)。
字元以穩定的打字節奏逐一出現，最後一個已輸入字元後面緊跟一個游標，打完後閃爍幾次。
只播放一次、不要循環，讓螢幕閱讀器立即讀到完整文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示完整文字。

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

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

藉由可變字型的軸，字母平順地變粗或變細（或改變寬度、傾斜度）。

在[套用位置]加入「可變字重動畫」(Variable Font Weight Animation) 懸停效果，也叫字重切換 (font weight shift)。
游標停在文字上時，字母從左到右依序變粗，形成一道流暢的波浪；游標移開後再變細。
使用可變字型，讓字重平順變化而不是跳變；標題變寬時不要推擠附近內容，並且在鍵盤焦點時呈現同樣的效果。

大型字母如同窗口，裡面顯示正在播放的影片。

在[套用位置]加入「影片文字」(Video Text) 效果，也叫文字影片遮罩 (text video mask)。
讓粗大的字母成為觀看正在播放影片的窗口，動態畫面只在字母形狀內顯示。
影片保持靜音、循環播放且不顯示控制項，為螢幕閱讀器提供真實的文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示一張靜止畫面。

字母依序上下起伏，在整個詞中形成流動的波浪。

在[套用位置]加入「波浪文字」(Wavy Text) 效果，也叫文字波浪 (text wave)。
字母依序上下起伏，讓一道輕柔流暢的波浪不斷穿過整個詞。
無縫循環，讓螢幕閱讀器把它讀作一個詞；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止波浪。

句子中的一個詞以滑動、翻轉或淡入淡出的方式換成清單中的下一個詞。

在[套用位置]加入「文字輪替」(Word Rotate) 效果，也叫輪替詞 (rotating words) 或翻轉詞 (flip words)。
行內的一個詞向上滑出，清單中的下一個詞從下方滑入，每個詞停留片刻後再切換。
詞寬不同時不要讓這一行的其餘部分跳動，不要讓螢幕閱讀器朗讀每次切換；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止輪替。

一團有機形狀持續不斷地改變自身輪廓。

在[套用位置]加入「液態團塊變形」(Blob Morph) 循環動畫，也叫 morphing blob 或 animated blob。
一團有機形狀一邊緩緩轉動，一邊不停地慢慢改變輪廓：流暢柔和，沒有尖角。
循環要無縫銜接，形狀不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

藉由模糊與對比濾鏡，相鄰的形狀像液滴一樣相互融合。

在[套用位置]加入「黏稠融合」(Gooey Effect) 效果，也叫 goo effect 或元球 (metaballs)。
游標移上去時，小液滴像液體一樣從主體拉長後脫離；游標移開後，它們流回來並平順地融合在一起。
模糊加對比濾鏡只套用在這一小組形狀上，不要套用到整個頁面；鍵盤聚焦和點按時也顯示同樣的效果。

漢堡選單等圖示透過線條的旋轉和移動變成另一個圖示（X）。

在[套用位置]加入「圖示變形」(Icon Morph)，也叫漢堡變 X (hamburger to X) 或 menu icon morph。
每次按下時，上下兩條線先一起滑到中間，再旋轉成 X，中間那條線同時淡出；再按一次就反向還原：俐落明快。
做成真正的切換按鈕，無障礙標籤和展開狀態跟著改變；圖示尺寸保持固定，周圍內容不會位移。

透過替虛線偏移加上動畫，讓 SVG 描邊看起來沿著路徑被畫出來。

在[套用位置]加入「線條繪製」(Line Drawing) 動畫，也叫路徑繪製 (path drawing) 或自繪 SVG (self-drawing SVG)。
每條描邊看起來沿著路徑從起點到終點流暢地自己畫出來，第二條描邊（例如勾號）緊接在第一條之後。
進入畫面時只播放一次，不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的線條。

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

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

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

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

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

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

SVG 濾鏡用動態雜訊讓文字或形狀產生扭曲。

在[套用位置]加入「SVG 置換扭曲」(SVG Displacement Distortion) 懸停效果，也叫置換貼圖效果 (displacement map effect)。
游標移上去時，文字或形狀像隔著流動的水一樣蕩漾晃動，效果柔和地漸入；游標移開後恢復清晰。
只在效果啟用時套用扭曲濾鏡，靜止時不產生任何負擔；鍵盤聚焦時也顯示同樣的效果。

遮罩形狀劃過或跟隨游標，露出下方的內容。

在[套用位置]加入「SVG 遮罩顯現」(SVG Mask Reveal) 懸停效果，也叫 clip-path reveal 或聚光燈遮罩 (spotlight mask)。
游標移上去時，圓形遮罩從中心擴大，露出下方的內容；游標移開後再收合：流暢且偏快。
兩個圖層保持完全相同的尺寸，避免任何位移；鍵盤聚焦和點按時也顯示同樣的顯現效果。

線條和圓點在地圖或地球上的各個地點之間動態移動。

在[套用位置]加入「動態地圖弧線」(Animated Map Arcs)，也叫 globe arcs。
曲線在點狀地圖的各地點之間依序畫出，接著往目的地收回，同時目的地有一圈柔和的光環脈動：平靜而穩定。
讓各條弧線錯開時間，絕不同步移動；循環要無縫；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就暫停播放。

長條從零高度升到各自的資料值。

在[套用位置]加入「長條圖成長」(Bar Chart Grow) 動畫，也叫 animated bar chart 或 bar chart entrance。
各根長條以快速的錯開節奏依序從基線升到各自的數值，落定時平順減速。
圖表進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示完成後的圖表。

隨著數值變化，水平長條的排名隨時間不斷交換。

在[套用位置]加入「長條圖競賽」(Bar Chart Race)，也叫 racing bar chart。
水平長條隨數值隨時間變化而伸縮，每當排名改變時平順地彼此超越，每根長條都帶著自己的標籤。
用 transform 移動長條，而不是重新排列標記結構，讓交換過程是滑動而不是跳動；並提供使用者暫停的方式。

資料變化或切換資料集時，圖表元素從舊值平順過渡到新值。

在[套用位置]加入「圖表資料轉場」(Chart Data Transition)，也叫 chart update animation。
資料變化時，所有長條同時從舊值平順、從容地過渡到新值，而不是從零重新繪製。
每次更新都從畫面上目前的數值開始，這樣快速接連的第二次變化也不會跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即套用新數值。

環圈或圓餅圖依順時針方向填滿到對應的百分比。

在[套用位置]加入「環圈圖填充」(Donut Chart Fill) 動畫，也叫 pie chart sweep 或 animated donut chart。
從頂端開始，各段依序順時針掃出，直到環圈顯示出各自的占比，結束時平順減速。
圖表進入畫面時只播放一次，並以文字形式提供實際數值給螢幕閱讀器。

數字出現在畫面上時，從起始值計數到目標值。

在[套用位置]加入「數字遞增」(Number Ticker)，也叫 count up 或 animated counter。
數字進入畫面時，從零計數到目標值，一開始快，接近終點時柔和地放慢。
使用等寬數字，避免周圍內容抖動；只計數一次；對螢幕閱讀器以及開啟了「減少動態效果」(prefers-reduced-motion) 的使用者，直接顯示最終數值。

數字變化時，每一位都縱向捲動到新的值。

在[套用位置]加入「里程表數字」(Odometer) 數字動畫，也叫 rolling numbers 或拉霸數字 (slot-machine digits)。
數值變化時，每一位都縱向捲動到新的數字，一律往前捲動，各位之間稍微錯開，結尾有輕微的回穩。
讓每一位數字寬度相同，避免整個數字位移；只提供最終數值給螢幕閱讀器。

彩色背景從一側掃入，帶有彈性的輕微過衝。

在[套用位置]加入「背景彈性掃過」(Background Bounce Sweep) 懸停效果。
新的背景色從一側掃入，帶著彈性稍微越過另一側邊緣後再回穩，同時文字顏色跟著切換以維持可讀性；游標移開時平順地滑出。
讓文字始終位於填色之上，鍵盤焦點時也呈現同樣的效果。

懸停時，背景色和文字顏色交叉漸變為新的顏色。

在[套用位置]加入「背景色漸變」(Background Fade) 懸停效果，也叫顏色漸變 (color fade)。
游標停在元素上時，背景色和文字顏色平順地交叉漸變為新顏色，移開後再漸變回來：沉穩，不帶任何位移。
兩種狀態下都要讓文字和背景保有足夠的對比，鍵盤焦點時也呈現同樣的效果。

懸停時，彩色背景從一側邊緣掃過整個元素。

在[套用位置]加入「背景掃過」(Background Sweep) 懸停效果，也叫背景填充 (background fill) 或滑動填充 (slide fill)。
新的背景色從左側邊緣掃到右側，平順、快速、不回彈，游標移開時以同樣方式退回，同時文字顏色跟著切換以維持可讀性。
讓填色始終裁切在元素的形狀之內，鍵盤焦點時也呈現同樣的效果。

懸停期間，元素先向上浮起，然後持續上下輕輕浮動。

在[套用位置]加入「上下浮動」(Bob) 懸停效果，也叫懸掛 (hang)。
元素先輕輕浮起，游標停留期間持續柔和地上下浮動，游標移開後再落回原位：緩慢而柔和。
只在懸停期間循環浮動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

懸停時，邊框顏色淡入或漸變為新顏色。

在[套用位置]加入「邊框色漸變」(Border Fade) 懸停效果。
游標停在元素上時，邊框從柔和的顏色平順漸變為強調色：含蓄，不帶位移或尺寸變化。
兩種狀態下的邊框粗細保持一致，避免任何位移，鍵盤焦點時也呈現同樣的效果。

懸停時，同心的邊框圓環從元素向外擴散或向內收縮。

在[套用位置]加入「邊框漣漪」(Border Ripple) 懸停效果。
游標移入時，幾道邊框圓環依序從元素向外擴散並淡出：快速輕盈，像漣漪一樣。
每次懸停只播放一次、不要循環，也不要讓圓環推擠周圍的版面。

懸停開始或結束時，元素帶著彈性過衝進行縮放。

在[套用位置]加入「彈性縮放」(Bounce Scale) 懸停效果，也叫彈入/彈出 (bounce in / out)。
元素帶著明顯的彈性稍微放大，短暫超過最終尺寸後再回穩；游標移開時以同樣的彈性縮回。
不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

高亮背景在網格中的卡片之間滑動，跟著目前懸停的卡片移動。

在[套用位置]加入「卡片懸停效果」(Card Hover Effect)，也叫滑動高亮卡片網格 (sliding highlight card grid)。
柔和的高亮背景出現在懸停卡片的後方，游標移到哪張卡片就平順地滑到哪裡，游標離開網格時淡出。
鍵盤焦點也要以同樣方式移動高亮，卡片本身保持不動。

柔和的放射狀光線跟著游標在卡片表面移動，照亮下方的背景。

在[套用位置]加入「卡片聚光燈」(Card Spotlight) 效果，也叫聚光懸停 (spotlight hover)、游標光暈 (pointer glow)、跟隨滑鼠的光暈 (mouse-following glow) 或放射狀漸層懸停 (radial gradient hover)。
柔和、淡淡的放射狀光暈跟著游標在卡片表面移動，游標移入時淡入，移出時淡出。
光暈放在卡片內容的後面，讓文字保持清楚易讀；在觸控裝置上則不顯示光暈。

懸停時，元素的一角像翻頁一樣捲起。

在[套用位置]加入「頁角捲起」(Curl) 懸停效果，也叫翻頁捲角 (page curl)。
元素的一角像翻頁一樣平順地捲起，露出摺角的背面，游標移開後再恢復平整。
摺角要小，不要遮住重要內容，鍵盤焦點時也呈現同樣的效果。

遮罩層從游標進入的一側滑入，並朝游標離開的一側滑出。

在[套用位置]加入「方向感知懸停」(Direction Aware Hover) 效果，也叫方向感知遮罩 (direction-aware overlay)。
遮罩層從游標進入的那一側滑入，再朝游標離開的那一側滑出：快速、流暢。
依據游標進入和離開時的位置判斷方向；觸控或鍵盤焦點時則統一使用一個預設方向。

游標靠近時，一排圖示平順放大，就像 macOS 的 Dock。

在[套用位置]加入「Dock 放大」(Dock Magnification) 效果，也叫 Dock (dock)。
游標越靠近，這一排圖示就平順地放大，最近的圖示最大、相鄰的圖示稍微放大；游標移開後全部恢復原本大小。
圖示從固定的基準線向上放大；在觸控和鍵盤操作時，每個圖示都要以正常大小正常可用。

懸停時，元素向上浮起幾個像素，彷彿飄浮起來。

在[套用位置]加入「浮起」(Float) 懸停效果，也叫抬升 (lift) 或升起 (raise)。
游標停在元素上時，元素輕輕向上浮起並維持，游標移開後再落回：平順柔和，沒有回彈。
只做視覺上的移動，不要推擠周圍的版面，鍵盤焦點時也呈現同樣的效果。

懸停的卡片保持清晰，其餘卡片變得模糊、變暗。

在[套用位置]加入「聚焦卡片」(Focus Cards) 效果，也叫懸停時模糊其他卡片 (blur siblings on hover)、懸停聚焦模糊 (hover focus blur) 或卡片懸停效果 (card hover effect)。
游標停在某張卡片上時，其他卡片變模糊、變暗並略微縮小，懸停的卡片保持清晰；整個過程平順過渡，游標移開後恢復原狀。
鍵盤焦點時也採用同樣的聚焦效果；沒有懸停任何卡片時，所有卡片都保持清楚易讀。

懸停時，元素周圍出現一圈彩色光暈。

在[套用位置]加入「發光」(Glow) 懸停效果，也叫霓虹光暈 (neon glow)。
游標停在元素上時，元素周圍淡入一圈柔和的彩色光暈，移開後淡出：柔和，不帶位移。
光暈不要影響版面，鍵盤焦點時也呈現同樣的效果。

游標停在元素上時，元素平順地略微放大。

在[套用位置]加入「放大」(Grow) 懸停效果，也叫放大縮放 (scale up)。
游標停在元素上時，元素平順地略微放大，移開後恢復原本大小：快速而含蓄。
不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

游標懸停時填滿的背景消失，只留下外框按鈕。

在[套用位置]加入「空心化」(Hollow) 懸停效果，也叫 ghost fill。
填滿的背景淡出，只留下外框，文字顏色隨之切換，在空背景上依然清楚易讀：流暢而快速。
兩種狀態的邊框粗細保持一致，避免元素尺寸改變；鍵盤聚焦時也顯示同樣的效果。

漸層邊框沿著元素四周流動，游標懸停時向外擴展。

在[套用位置]加入「懸停漸層邊框」(Hover Border Gradient) 效果。
一小段漸層亮光停在邊框的某一處；游標懸停時，它沿著邊框等速環繞，同時整圈邊框帶著柔和光暈變亮。
只在懸停時讓邊框動起來；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

游標懸停時元素下方出現或加深一層柔和陰影，營造浮起的感覺。

在[套用位置]加入「懸停陰影」(Hover Shadow) 效果，也叫 drop shadow on hover 或 elevation on hover。
游標懸停時，元素下方的柔和陰影加深並擴散，讓它看起來浮起；游標移開後再淡回原樣，元素本身保持不動。
陰影要夠含蓄，在淺色和深色主題下都合適；鍵盤聚焦時也顯示同樣的效果。

一層半透明覆蓋層替元素染上顏色，表示游標正停在上面。

在[套用位置]加入「懸停狀態層」(Hover State Layer)，也叫 hover state、state layer 或 hover overlay。
游標懸停時，一層使用內容顏色的淡淡半透明覆蓋層快速淡入蓋住元素，游標移開後淡出。
保持夠淡，不影響對比度；聚焦和按下狀態也使用同樣的狀態層做法。

游標懸停時圖示往下掉出視線範圍，再從上方落回。

在[套用位置]加入「圖示下落」(Icon Drop) 懸停效果。
元素內的圖示往下掉出視線範圍，再從上方落回原位：快速，落地輕柔。
每次游標移入只播放一次，不要循環；標籤和按鈕尺寸保持不變。

圖示飄出按鈕並淡出，同時新圖示飄進來。

在[套用位置]加入「圖示浮離」(Icon Float Away) 懸停效果。
目前的圖示往上飄走並淡出，同時新圖示從下方浮上來補位，過渡流暢；游標移開時反向切換回來。
切換過程中按鈕尺寸保持固定；鍵盤聚焦時也顯示同樣的效果。

游標懸停在按鈕上時，按鈕內的圖示轉動一圈。

在[套用位置]加入「圖示旋轉」(Icon Spin) 懸停效果。
游標移入時，元素內的圖示流暢地轉一整圈；游標移開時再轉回去。
只旋轉圖示，不旋轉整個按鈕；鍵盤聚焦時也顯示同樣的效果。

游標懸停時按鈕文字滑出，箭頭和填色隨之展開。

在[套用位置]加入「懸停互動按鈕」(Interactive Hover Button) 效果。
文字旁的小圓點放大到填滿按鈕，同時文字往一側滑出並淡出，帶箭頭的文字再從新的填色上滑入：流暢而快速。
按鈕尺寸保持固定，文字全程清楚易讀；鍵盤聚焦時也顯示同樣的效果。

游標懸停時箭頭或元素本身往前或往後滑動幾個像素。

在[套用位置]加入「前後輕推」(Nudge Forward / Backward) 懸停效果，也叫 arrow nudge。
游標懸停時，箭頭朝它指的方向輕輕滑動一小段，游標移開後滑回：快速、幅度小。
只移動箭頭，不要讓文字或版面跟著位移；鍵盤聚焦時也顯示同樣的效果。

游標懸停時外框線從元素往外擴張，或往元素收縮。

在[套用位置]加入「外框擴張」(Outline Expand) 懸停效果。
外框線一開始緊貼元素邊緣，接著往外擴張，在四周留出一小圈間隙，懸停期間維持不變，游標移開後再收回：流暢而快速。
繪製外框時不要改變元素尺寸，也不要推擠周圍內容；鍵盤聚焦時也顯示同樣的效果。

游標懸停時文字上方出現一條線，從左側、中間或右側延伸開來。

在[套用位置]加入「上邊線延伸」(Overline Grow) 懸停效果。
游標懸停時，文字上方的線從中間往兩側延伸，游標移開後再縮回中間：快速而流暢。
預留線條的空間，避免文字位移；鍵盤聚焦時也顯示同樣的效果。

元素快速放大，再帶著彈性「啵」地回到原樣。

在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時，元素快速鼓起一次再回到正常大小，像一次帶彈性的輕快彈跳。
每次懸停只播放一次，不要停在放大狀態，也不要循環；避免周圍版面位移。

元素往內一沉再彈回，彷彿按下了一顆實體按鈕。

在[套用位置]加入「按壓」(Push) 懸停效果。
每次游標移入時，元素快速縮小一次再彈回正常大小，就像按下一顆實體按鈕。
每次懸停只播放一次，不要循環；避免周圍版面位移。

游標懸停時一個彩色圓形從中心放大或往中心收縮，填滿元素。

在[套用位置]加入「圓形填充」(Radial Fill) 懸停效果，也叫 circle expand。
新顏色的圓形從中心流暢地放大到填滿元素，游標移開後再縮回中心，同時文字顏色隨之切換，保持清楚易讀。
圓形要裁切在元素形狀之內，文字位在它上方；鍵盤聚焦時也顯示同樣的效果。

游標懸停時元素內部的矩形放大或收縮，藉此切換背景。

在[套用位置]加入「矩形填充」(Rectangle Fill) 懸停效果。
隨著內部矩形往中心收縮，新背景色從四邊往內合攏；游標移開後再重新打開，同時文字顏色隨之切換，保持清楚易讀：流暢而快速。
文字始終位在填充層上方；鍵盤聚焦時也顯示同樣的效果。

游標懸停時元素旋轉幾度。

在[套用位置]加入「旋轉」(Rotate) 懸停效果。
游標懸停時，元素順時針輕微轉動，游標移開後轉回：流暢而含蓄。
避免周圍版面位移；鍵盤聚焦時也顯示同樣的效果。

懸停時，元素的直角平順地變成圓角。

在[套用位置]加入「圓角化」(Round Corners) 懸停效果。
游標停在元素上時，元素的直角平順地變圓，移開後再恢復成直角：柔和而快速。
保持元素尺寸不變，鍵盤焦點時也呈現同樣的效果。

懸停時，一道斜向光帶從元素的一側掃到另一側。

在[套用位置]加入「光澤掃過」(Shine Sweep) 懸停效果，也叫光澤 (sheen)、閃亮按鈕 (shiny button)、懸停掃光 (shine on hover)、閃光 (glint)、微光 (shimmer) 或微光按鈕 (shimmer button)。
游標停在元素上時，一道柔和的斜向光帶從左往右掃過元素，並在短暫停頓後重複。
光帶要裁切在元素內部，游標移開後停止；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不要播放。

游標停在元素上時，元素平順地略微縮小。

在[套用位置]加入「縮小」(Shrink) 懸停效果，也叫縮小 (scale down)。
游標停在元素上時，元素平順地略微縮小，移開後恢復原本大小：快速而含蓄。
不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

懸停時，背景像百葉窗一樣從中間或兩側展開或合攏。

在[套用位置]加入「百葉窗填充」(Shutter Fill) 懸停效果，也叫百葉窗 (shutter)。
新的背景色從中間一條直線像百葉窗一樣向兩側展開，游標移開後再往中間合攏，同時文字顏色跟著切換以保持清楚易讀：流暢而快速。
填色要裁切在元素內部，文字保持在上方，鍵盤焦點時也呈現同樣的效果。

懸停時，元素向下移動幾個像素，彷彿被按進頁面裡。

在[套用位置]加入「下沉」(Sink) 懸停效果。
游標停在元素上時，元素略微下移並停住，彷彿被按進頁面裡，移開後再升回原位：平順，沒有回彈。
只在視覺上移動，不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

懸停時，元素向一側斜切變形。

在[套用位置]加入「斜切」(Skew) 懸停效果。
游標停在元素上時，元素向一側斜切成輕微傾斜的樣子，移開後恢復端正：快速而流暢。
傾斜時文字仍要清楚易讀，不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

懸停時，元素一側出現一個對話泡泡的小三角。

在[套用位置]加入「對話泡泡」(Speech Bubble) 懸停效果，也叫泡泡 (bubble)。
一個小三角尾巴從元素一側的後方滑出，讓元素變成對話泡泡的形狀，游標移開後再滑回去：快速而流暢。
尾巴要和元素同色，看起來是一個整體，鍵盤焦點時也呈現同樣的效果。

懸停時，元素邊緣內側出現一條內框線。

在[套用位置]加入「內框線」(Trim) 懸停效果。
游標停在元素上時，一條細線在元素邊緣內側淡入，移開後淡出：含蓄，不帶位移。
線條要放在元素內部，保持元素尺寸不變，鍵盤焦點時也呈現同樣的效果。

一條線從底邊或頂邊滑入定位，為元素加上底線或頂線。

在[套用位置]加入「底線顯現」(Underline Reveal) 懸停效果，也叫頂線顯現 (overline reveal) 或顯現 (reveal)。
游標停在元素上時，一條滿版寬度的線從底邊正下方往上滑入定位，移開後再往下滑出視線：快速而流暢。
在邊緣處裁切線條，讓它以滑入而不是淡入或伸長的方式出現，鍵盤焦點時也呈現同樣的效果。

游標在卡片上移動時，卡片隨之輕微平移和縮放。

在[套用位置]加入「搖晃卡片」(Wobble Card) 效果。
游標在卡片上移動時，卡片朝游標方向輕微平移，內容則朝反方向輕微平移並略微放大，平順地跟隨；游標移開後一切回到原位。
保持幅度很小；在觸控裝置上關閉，如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，也要關閉。

商品圖片一邊縮小一邊沿弧線飛進購物車圖示。

在[套用位置]加入「飛入購物車」(Add to Cart Fly) 動畫，也叫 fly to cart 或加入購物車動畫 (add-to-cart animation)。
按下加入按鈕時，商品圖片的一個小複本一邊縮小，一邊沿一條流暢而快速的弧線飛進購物車圖示，購物車在數量更新時輕輕彈一下。
每次按下只播放一次，不要移動原本的商品卡片；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就省略飛行動畫，但照常更新購物車。

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

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

彩色紙片噴發而出再飄落下來，用來慶祝成功。

在[套用位置]加入「彩紙噴發」(Confetti) 慶祝效果，也叫彩紙爆發 (confetti burst)。
彩色小紙片從按鈕中快速噴發出來，接著翻滾著飄落並逐漸淡出，形成一陣短促而熱鬧的紙片雨。
每次成功只觸發一次，不要循環，不要擋住頁面上的點擊；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不要播放。

複製圖示變成勾號，標籤短暫顯示「已複製」。

在[套用位置]加入「複製回饋」(Copy-to-Clipboard Feedback) 動畫，也叫已複製狀態 (copied state) 或複製圖示變勾號 (copy icon to checkmark)。
按下複製按鈕時，複製圖示快速縮小消失，同時畫出一個勾號，標籤變為「已複製」，片刻之後一切平順地恢復原狀。
切換過程中保持按鈕尺寸不變，不讓任何東西位移，並把已複製狀態告知螢幕閱讀器。

拖曳時元素跟著游標移動，並可以限制在某個區域或某條軸上。

在[套用位置]加入「拖曳」(Drag) 互動，也叫可拖曳 (draggable) 或拖曳限制 (drag constraints)。
拖曳時元素直接跟著游標，在允許區域的邊緣停住，放開後帶一點回彈地彈回靜止位置。
觸控和滑鼠都要能用，拖曳時下方的頁面不能跟著捲動，並提供用鍵盤移動它的方式。

輸入框取得焦點或已有內容時，預留位置標籤上移並縮小到輸入框上方。

在[套用位置]加入「浮動標籤」(Floating Label)，也叫浮動標籤 (float label) 或動畫預留位置 (animated placeholder)。
輸入框取得焦點或已有值時，原本在框內的標籤平順而快速地上移並縮小，停到輸入框的上緣；只有在輸入框為空且失去焦點時才落回原處。
保持它是與輸入框關聯的真正 label，並確保輸入框高度不變，讓表單永遠不會跳動。

點擊時愛心圖示填滿顏色，並迸發出小粒子或跳動一下。

在[套用位置]加入「愛心迸發」(Like / Heart Burst) 動畫，也叫愛心動畫 (heart animation) 或收藏切換 (favorite toggle)。
按讚時愛心填滿顏色並帶彈性地彈一下，同時一圈光環和小圓點向外迸發並淡出，整體快速、俏皮；取消按讚時愛心只是安靜地變空。
做成帶有按下狀態的真正切換按鈕，只在開啟時播放迸發效果。

按住元素片刻即可觸發額外操作或進度填滿。

在[套用位置]加入「長按」(Long Press) 互動，也叫 press and hold 或 touch and hold。
按住時元素輕微下沉，同時進度填滿以穩定的速度掃過它；填滿後元素帶彈性地回彈並開啟選單，提前放開則取消並重設填滿。
為鍵盤和螢幕閱讀器使用者提供另一種方式來執行相同操作，並且不要讓長按觸發文字選取或瀏覽器內建的右鍵選單。

收到新通知時，數字徽章彈出、彈跳或脈動。

在[套用位置]加入「通知徽章彈跳」(Notification Badge Bounce) 動畫，也叫 badge pop 或 ping。
收到新通知時，數字徽章從無到有地彈出，帶著兩下快速、有彈性的跳動落定，同時一圈柔和的光環從它向外擴散一次。
每則新通知只播放一次，不要循環，並讓螢幕閱讀器唸出新的數字。

顯示或隱藏密碼時，眼睛圖示在睜開和帶斜線之間切換。

在[套用位置]加入「密碼顯示切換」(Password Reveal Toggle)，也叫 show/hide password 或眼睛圖示切換 (eye icon toggle)。
點擊眼睛時斜線迅速擦除，隱藏的圓點交叉淡入為真實字元；再次點擊時斜線重新畫出並隱藏字元：流暢、快速，不要彈跳。
保持輸入框寬度不變以免文字跳動，並把切換做成真正的按鈕，用標籤說明目前密碼是否顯示。

文字捲動進入畫面時，一個指標箭頭圍繞某個詞畫出醒目框。

在[套用位置]加入「指標框選」(Pointer Highlight) 效果。
文字捲動進入畫面時，一個方框從左到右圍繞關鍵詞畫出，同時一個小指標箭頭沿著方框的角移動，流暢、等速，就像有人用手圈出這個詞。
只在第一次進入畫面時畫一次，不要推擠文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的方框。

按下時元素略微縮小，放開後帶彈性地恢復。

在[套用位置]加入「按下縮放」(Press (Button Tap Scale)) 效果，也叫點按回饋 (tap feedback) 或按下狀態 (press state)。
按下時元素略微縮小並稍微變暗，放開後帶一點彈跳恢復原本大小：快速、含蓄。
用鍵盤按下和觸控時也顯示同樣的回饋，並保持周圍版面不位移。

向下拖曳清單會露出載入圖示，放開後重新載入內容。

在[套用位置]加入「下拉重新整理」(Pull to Refresh) 互動，也叫 swipe to refresh。
從頂端往下拉清單時，清單帶著一點阻力跟隨手指，並露出一個隨拉動旋轉的載入圖示；放開後載入圖示在內容重新載入期間持續旋轉，完成後清單平順地收回頂端。
只在清單已經捲動到頂端時才觸發，並為鍵盤和螢幕閱讀器使用者另外提供一般的重新整理按鈕。

圓形漣漪從點擊或輕觸的確切位置擴散開並淡出。

在[套用位置]加入「漣漪效果」(Ripple)，也叫 material ripple 或 ink ripple。
每次點擊或輕觸時，一圈柔和的圓形漣漪從按下的確切位置向外擴散，直到覆蓋整個元素，邊擴散邊淡出：快速、輕盈。
漣漪要依元素的形狀裁切，快速連續按下時每次都產生新的漣漪，用鍵盤按下時從中心開始擴散。

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

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

橫向滑動清單列，露出刪除或封存等操作按鈕。

在[套用位置]加入「滑動刪除」(Swipe to Delete) 互動，也叫 swipe actions 或 swipe to reveal。
橫向拖曳某一列時，它直接跟著手指移動，露出後方的封存、刪除等操作按鈕，按鈕完全露出後停住；放開後平順地滑到定位，不要回彈。
橫向滑動時仍要確保垂直捲動可用，並讓鍵盤和螢幕閱讀器使用者不必滑動也能執行相同操作。

圓形滑塊沿軌道滑動，軌道顏色在關和開之間切換。

在[套用位置]加入「切換開關」(Toggle Switch) 動畫，也叫 switch。
開啟或關閉時，圓形滑塊平順地滑到軌道另一端，同時軌道顏色跟著改變：快速、俐落，不要彈跳。
做成真正符合無障礙的開關 (帶有 checked 狀態的 role="switch")，並且支援鍵盤操作。

文字插入點會隨旁邊字元的大小變長或變短。

在[套用位置]加入「自適應插入點」(Adaptive Caret) 效果，也叫 adaptive caret size。
文字插入點移到離游標最近的字元前面，並迅速拉長或縮短到與該字元同高，尺寸變化流暢俐落，不要彈跳。
保持文字本身不移動，並讓插入點像跟隨游標一樣跟隨鍵盤移動。

圓形游標透過 mix-blend-mode 的 difference 模式反轉下方的顏色。

在[套用位置]加入「混合模式游標」(Blend-Mode Cursor)，也叫 difference cursor 或反色游標 (inverting cursor)。
用一個實心圓取代指標，它毫無延遲地緊貼在指標下方，並反轉經過的文字和圖形的顏色。
把混合效果限制在這個區域內，不要和頁面其他部分混合；確保在深色模式下也能清楚反色，觸控裝置上則保留一般游標。

一個形狀或標籤帶著彈性或緩動的延遲跟隨游標。

在[套用位置]加入「游標跟隨」(Cursor Follower) 效果，也叫 following pointer 或 smooth cursor。
一個小圓點標記以柔和的緩動延遲跟隨游標，並平順地滑行到游標停下的位置剛好停住，不要彈跳。
保留真正的游標可見，標記絕不能擋住點擊，觸控裝置上不顯示它。

游標停在文字清單項目上時，一張預覽圖片跟著游標移動。

在[套用位置]加入「游標圖片懸停」(Cursor Image Hover) 效果，也叫 hover image follow 或懸停圖片預覽 (image preview on hover)。
游標停在文字清單項目上時，該項目的一張小預覽圖浮在游標旁邊，帶著輕微、流暢的延遲跟隨游標；游標移到另一個項目時，預覽圖滑動切換到下一張。
預覽圖絕不能擋住清單的點擊；在觸控和鍵盤操作下，即使沒有預覽圖，清單也要完全可用。

游標周圍的一圈光照亮內容，其餘部分維持暗色。

在[套用位置]加入「游標聚光燈」(Cursor Spotlight) 效果，也叫手電筒游標 (flashlight cursor) 或聚光燈效果 (spotlight effect)。
一圈柔和的光跟隨游標，照亮下方的內容，區域內其餘部分維持變暗。
在觸控裝置上沒有可跟隨的游標，改為直接完整照亮顯示內容。

游標移動時，後方留下一串逐漸消失的圖形。

在[套用位置]加入「游標拖尾」(Cursor Trail) 效果，也叫滑鼠拖尾 (mouse trail)。
游標移動時，後方留下一小串小圓點，每個點都迅速縮小並淡出，讓拖尾保持短小，順暢地描出移動路徑。
只在游標移動時繪製拖尾，絕不能擋住點擊；在觸控裝置上，或者如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不要顯示。

預設箭頭被換成有樣式的圓點或圓環，移到可互動元素上時會跟著變化。

在[套用位置]加入「自訂游標」(Custom Cursor)，也叫動畫游標 (animated cursor) 或游標替換 (cursor replacement)。
用一個精準跟隨游標的小圓點，加上一個稍微落後跟隨的圓環來取代預設箭頭；移到連結和按鈕上時，圓環平順地放大。
在觸控裝置和文字輸入框中保留一般游標，而且自訂游標絕不能擋住點擊。

游標靠近時元素被吸向游標，離開後又彈回原位。

在[套用位置]加入「磁吸按鈕」(Magnetic Button) 效果，也叫磁吸目標 (magnetic target) 或磁吸懸停 (magnetic hover)。
游標靠近時，按鈕被輕輕吸向游標，按鈕文字移動得再多一點；游標離開後，按鈕帶著一點小彈跳回到原位。
不要讓周圍版面跟著移動；在觸控裝置上，或者如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就關閉吸附。

一片短線條轉向游標，就像磁鐵周圍的鐵屑。

在[套用位置]加入「磁吸鐵屑」(Magnetic Filings) 效果。
一組網格排列的短線條立即轉向，每一條都正對游標，就像磁鐵周圍的鐵屑；沒有游標時，全部朝向中心。
把它當成純裝飾背景，絕不能擋住點擊；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，讓線條保持靜止。

切換標題時，內容面板平順地展開到完整高度，或收合到零。

在[套用位置]加入「手風琴展開收合」(Accordion Expand-Collapse) 效果，也叫摺疊面板 (collapse) 或展開區 (disclosure)。
點擊標題時，面板平順地展開到內容的完整高度，再點一次就完全收合，標題上的箭頭也跟著旋轉：快速、流暢，不要回彈。
依內容的實際高度做動畫，不要寫死一個估計值；標題要用真正的按鈕並標示展開狀態，而且要能用鍵盤操作。

一層半透明的深色遮罩在浮層後方淡入，讓頁面變暗。

在[套用位置]加入「背景遮罩淡入」(Backdrop Scrim Fade)，也叫浮層淡入 (overlay fade) 或遮罩 (scrim)。
浮層開啟時，一層半透明的深色遮罩在後方頁面上柔和地淡入，比浮層本身稍慢一點；關閉時再淡出。
不論淺色或深色主題，遮罩都維持深色；遮罩顯示期間，後方頁面不能捲動，也不能接收點擊。

面板從底部邊緣向上滑出，通常可以拖曳，並吸附到幾個固定高度。

在[套用位置]加入「底部面板上滑」(Bottom Sheet Slide-Up)，也叫底部抽屜 (bottom drawer) 或面板 (sheet)。
面板從底部邊緣向上滑出，同時後方頁面變暗，平順減速停到定位，不要回彈。
每次開啟面板都播放一次，關閉時再滑回下方；面板開啟期間，鍵盤焦點要留在面板內。

投影片停在原處，彼此交叉淡化切換，而不是滑動。

在[套用位置]加入「輪播交叉淡化」(Carousel Crossfade)，也叫淡入淡出投影片 (fade slideshow) 或輪播淡化 (carousel fade)。
投影片停在原處，緩慢地交叉淡化：舊的一張淡出的同時，下一張淡入，接著停留幾秒再換到下一張。
無縫循環回到第一張，滑鼠懸停或取得焦點時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，不要自動切換。

投影片在可視區域內水平移動，每次吸附一張到定位。

在[套用位置]加入「輪播滑動」(Carousel Slide)，也叫滑桿 (slider) 或滑動輪播 (swipe carousel)。
每一步都讓整排橫向滑動，使下一張投影片吸附到中間，平順減速；兩側邊緣露出相鄰的投影片，位置圓點也跟著變化。
每次只移動一張，除了按鈕和方向鍵，也支援觸控滑動，並替控制項加上給螢幕閱讀器讀取的標籤。

卡片展開成完整的詳細畫面，始終是同一個可見容器在改變形狀並顯示新內容。

在[套用位置]加入「容器轉換」(Container Transform) 轉場，也叫卡片展開到詳細頁 (card expand to detail) 或可展開卡片 (expandable card)。
開啟卡片時，同一個容器平順地擴展成完整的詳細畫面：舊內容迅速淡出，容器快要展開完時新內容再淡入；關閉時反向播放。
始終維持一個連續的容器，而不是在兩個獨立的方框之間交叉淡化；開啟後把焦點移到詳細畫面裡。

拖曳某一項時，其他項目滑開讓位，並依新的順序排好。

在[套用位置]加入「拖曳排序清單」(Drag-to-Reorder List)，也叫可排序清單 (sortable list)。
被拖曳的項目直接跟著游標並微微浮起，其他項目平順地滑開讓位；放開後，它迅速落入最近的位置。
同時支援觸控和滑鼠，並提供用鍵盤移動項目的方式，把新位置報讀給螢幕閱讀器。

側邊面板從左、右或頂部邊緣滑入，推開或覆蓋頁面內容。

在[套用位置]加入「抽屜滑動」(Drawer Slide)，也叫畫布外選單 (off-canvas) 或側邊面板 (side sheet)。
面板從側邊滑入並覆蓋在內容上方，同時後方頁面變暗，速度快、平順減速；關閉時用同樣的方式滑出。
抽屜開啟時把鍵盤焦點留在裡面，可以用 Escape 鍵或點擊變暗區域關閉，關閉後把焦點還給開啟它的按鈕。

版面變動後，元素平順地移動到新的位置和尺寸。

在[套用位置]加入「FLIP 版面動畫」(FLIP Layout Animation)，也叫版面動畫 (layout animation) 或 First-Last-Invert-Play。
版面變動時，每個元素從舊位置平順移動到新位置，而不是直接跳過去：一開始快，最後輕柔地定位。
只用 transform 做動畫，避免頁面每一格都重新排版；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換到新版面。

清單項目新增時淡入並滑入，刪除時以動畫退場，相鄰項目隨之補上空位。

在[套用位置]加入「清單項目進出場」(List Item Enter/Exit) 動畫，也叫動畫清單 (animated list)。
新項目先撐開自己的空間，再淡入並滑入；被刪除的項目先淡出，再收合高度，讓相鄰項目平順地補上空位。
被刪除的項目要等退場動畫結束後才移除，這樣新增或刪除項目時清單才不會跳動。

一行內容橫向無縫地無限循環捲動。

在[套用位置]加入「跑馬燈」(Marquee)，也就是水平方向無限捲動的橫條，也叫 ticker。
內容由右往左以緩慢、等速的速度捲動，無縫循環，銜接處不能出現跳動。
滑鼠移上去時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止捲動。

套用篩選或排序時，網格中的方塊重新排列、淡出或滑到新的位置。

在[套用位置]加入「網格重排」(Masonry / Grid Shuffle) 效果，也叫可篩選網格動畫 (filterable grid animation)。
套用篩選時，不再符合的方塊在原地縮小並淡出，其餘方塊平順地滑到新位置；清除篩選時反向播放。
網格高度變化時不要讓周圍頁面跳動；篩選控制項要用真正的按鈕，並標示目前選取的是哪個篩選。

對話框在變暗的頁面上方，從中心稍微放大並淡入。

在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫，也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時，對話框從中心稍微放大並淡入：快速、含蓄，不要回彈。
每次開啟對話框都播放一次，把焦點移進對話框並留在裡面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，只用簡單的淡入。

浮動選單從觸發按鈕所在的位置一邊放大一邊淡入。

在[套用位置]加入「彈出選單展開」(Popover / Dropdown Open) 動畫，也叫 menu pop 或 dropdown scale-fade。
選單從觸發按鈕旁的角落一邊微微放大一邊淡入，要快速、俐落；關閉時淡出得稍快一些。
讓選單始終貼著觸發按鈕，按 Escape 或點擊外部即可關閉，並在觸發按鈕上向螢幕閱讀器標示展開狀態。

元素彷彿移動並縮放到新位置上對應的元素，看起來是同一個物件。

在[套用位置]加入「共享版面動畫」(Shared Layout Animation)，也叫頁面內共享元素 (in-page shared element)。
選取項目改變時，元素要從舊位置平順地移動並縮放到新位置，輕柔地就定位，讓人看出這是同一個物件而不是兩個。
任何時刻只顯示一份，移動過程中不要讓周圍版面跳動。

底線或膠囊形背景從舊頁籤滑動到新選取的頁籤。

在[套用位置]加入「頁籤指示器滑動」(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
選取新頁籤時，底線從舊頁籤滑到新頁籤，快速並平順減速；如果兩個頁籤寬度不同，就順勢伸縮到新頁籤的寬度。
保持正確的頁籤語意並支援方向鍵切換；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，指示器就直接移過去，不做滑動。

簡短訊息從螢幕邊緣滑入或淡入，停留片刻後離開；堆疊的通知會移動讓出位置。

在[套用位置]加入「快顯通知滑入」(Toast Slide-In)，也叫 snackbar 或 toast notification。
每則訊息從螢幕邊緣向上滑入並淡入，平順減速；有新通知出現時，已顯示的通知要平順移動讓出位置。
在不搶走焦點的前提下把訊息朗讀給螢幕閱讀器，顯示時間要足夠閱讀，滑鼠移上去或取得焦點時暫停自動關閉。

滑鼠停留片刻後，一個小標籤在元素旁一邊輕移到位一邊淡入。

在[套用位置]加入「工具提示淡入」(Tooltip Fade)，也叫 tooltip reveal。
滑鼠停留片刻後，標籤在元素旁一邊輕移到位一邊淡入；游標離開時立刻快速消失，不要延遲。
鍵盤聚焦時也要顯示，按 Escape 可關閉，並把它與元素關聯起來，讓螢幕閱讀器能唸出。

新畫面在一個從點擊位置向外擴展的圓形中顯現。

在[套用位置]加入「圓形顯現」(Circular Reveal) 轉場，也叫 clip-path circle expand 或 theme toggle reveal。
新畫面在一個從被按下的控制項處向外擴展的圓形中出現，直到覆蓋整個區域：平順、穩定，起止都要和緩。
圓形要正好從按下控制項的位置開始；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不用圓形、直接切換。

舊頁面淡出的同時，新頁面在同一區域淡入。

在[套用位置]加入「交叉淡化轉場」(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
切換頁面時，舊頁面淡出，新頁面同時在同一區域淡入：柔和，而且相當快。
讓兩個頁面保持在同一位置，淡化過程中不能有任何位移；切換後把焦點移到新頁面的主標題上。

實色面板掃過螢幕遮住舊頁面，隨後收回，露出新頁面。

在[套用位置]加入「布幕擦除轉場」(Curtain / Panel Wipe) 頁面轉場，也叫 page wipe 或 staggered panels。
實色面板依序掃入，遮住舊頁面；頁面在完全被遮住時切換，接著面板繼續移出畫面，露出新頁面：大膽而流暢。
面板遮住舊頁面之前絕不能露出新頁面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。

舊內容先完全淡出，新內容再帶著輕微縮放淡入。

在[套用位置]加入「淡出再淡入」(Fade Through) 頁面轉場，也叫 fade-through transition 或 out-in route transition。
舊內容先快速、完全地淡出，接著新內容一邊微微放大到位一邊淡入。
兩者絕不能重疊，新內容放大時版面也不能位移。

帶有 Logo 或計數器的全螢幕開場層滑走或淡出，露出網站。

在[套用位置]加入「載入布幕升起」(Preloader Curtain Lift)，也叫 splash screen 或 intro loader。
全螢幕開場層在載入條填滿期間保持不動，接著平順地向上滑走，露出下方輕柔就定位的網站。
只在首次載入時播放，停留時間絕不能超過實際載入所需；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接略過。

舊內容和新內容沿 X、Y 或 Z 軸一起移動並伴隨淡入淡出，以表現空間關係。

在[套用位置]加入「共享軸轉場」(Shared Axis) 頁面轉場，也叫 shared axis X/Y/Z。
前進時，舊內容向一側滑動一小段並快速淡出，新內容從另一側滑入並緊接著淡入；返回時方向相反。
位移要短，只需暗示方向；軸向要與導覽對應：同層用橫向，分步用縱向，逐層深入用縱深方向。

對應的元素（例如縮圖）在頁面之間變換位置和大小。

在[套用位置]加入「共享元素轉場」(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
進入下一頁時，對應的元素（例如縮圖）平順地移動並放大到新頁面上的位置，其餘內容交叉淡化；返回時再縮回去。
給兩個頁面上對應的元素同一個共享識別，確保正確配對；瀏覽器無法變換時，退回為單純的交叉淡化。

新頁面從一側滑入，舊頁面同時滑出，方向跟隨導覽層級。

在[套用位置]加入「滑動轉場」(Slide Page Transition)，也叫 push / pop 或 directional slide。
前進時，新頁面從側邊推入，舊頁面從另一側滑出；返回時兩者反向移動：平順，起止都要和緩。
方向要與導覽層級對應，包括瀏覽器的上一頁按鈕；滑動過程中頁面不能出現橫向捲動。

舊頁面放大或縮小並淡出，新頁面同時縮放到位。

在[套用位置]加入「縮放轉場」(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入時，舊頁面微微放大並淡出，新頁面從稍小的尺寸放大到位；返回時反向縮小：平順、快速。
縮放幅度要含蓄，確保內容全程可讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。

幾根直條錯開節奏地伸縮，像音訊等化器一樣。

在[套用位置]加入「等化器載入」(Bar Loader (Equalizer)) 動畫，也叫 bars loader 或 audio bars。
幾根直條像音訊等化器一樣彼此錯開節奏地伸縮，節奏輕快但均勻。
循環要無縫銜接，為螢幕閱讀器加上狀態標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。

先用一張極小的模糊版圖片佔位，完整圖片載入後逐漸變清晰。

在[套用位置]加入「模糊佔位圖」(Blur-Up Placeholder) 圖片載入效果，也叫 LQIP 或 blur placeholder。
先立刻用一張極小、高度模糊的圖片填滿圖片位置，完整圖片載入完成後，平順且較快地變清晰。
預先保留圖片的準確尺寸，圖片載入時不能造成任何位移；並裁掉模糊的邊緣，不要溢出邊框。

一排圓點依序彈跳、淡入淡出或縮放。

在[套用位置]加入「彈跳圓點」(Bouncing Dots)，也叫 dots loader 或 three-dot loader。
圓點以輕快、有彈性的節奏依序跳起再落下，一輪結束後稍微停頓，再重新開始。
循環要無縫銜接，並為螢幕閱讀器提供狀態標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。

動作執行期間，按鈕把文字換成一個小載入圖示，或在旁邊加上它。

在[套用位置]加入「按鈕載入狀態」(Button Loading State)，也叫 spinner button 或 loading button。
按下時按鈕輕輕下壓，文字淡出，動作進行期間在原位置顯示一個小載入圖示，完成後文字再回來。
載入時保持按鈕寬度不變，防止重複點擊，並向螢幕閱讀器播報忙碌狀態。

圓環或圓弧持續旋轉，表示正在載入。

在[套用位置]加入「圓形載入圈」(Circular Spinner)，也叫 spinner 或 throbber。
一段圓弧沿著淺色圓環等速旋轉，同時不斷伸長又縮短，流暢而連續。
旋轉要無縫銜接，並為螢幕閱讀器提供載入標籤；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就放慢或停止旋轉。

進度條依任務完成比例由左往右填滿。

在[套用位置]加入「確定進度條」(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
進度條隨實際進度由左往右填滿，每次更新之間平順過渡，並在旁邊顯示百分比。
使用含目前值、最小值和最大值的正確進度條語意，讓螢幕閱讀器能讀出進度，而且填充絕不能倒退。

時長未知時，一段進度條沿著軌道反覆滑過。

在[套用位置]加入「不確定進度條」(Indeterminate Linear Progress)，也叫 indeterminate progress bar。
在任務時長未知期間，一小段進度條沿著軌道從一端滑到另一端，反覆進行，快速而流暢。
讓這一段完整地滑入並滑出軌道，使循環看不出銜接處，並為螢幕閱讀器將它標示為忙碌中的進度條。

長任務推進時，步驟清單逐項醒目標示或打勾。

在[套用位置]加入「多步驟載入」(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步驟由上而下逐一亮起，每完成一步就彈出一個小勾勾，節奏平穩、方便閱讀。
依照任務的實際進度推進步驟，而不是用固定計時器，並向螢幕閱讀器播報每個已完成的步驟。

圓弧沿著圓環延伸，顯示完成的百分比。

在[套用位置]加入「環形進度條」(Progress Ring)，也叫 circular progress 或 radial progress。
圓弧從頂端開始沿圓環順時針延伸，顯示完成的百分比，停下時緩緩減速，同時中間的數字跟著遞增。
讓圓弧和數字保持同步，並用正確的進度條語意向螢幕閱讀器提供數值。

灰色佔位區塊柔和地明暗變化，提示內容正在載入。

在[套用位置]加入「佔位脈動」(Pulse Placeholder)，也叫 skeleton pulse。
和即將出現的內容形狀一致的灰色佔位區塊一起緩慢變亮再恢復，節奏柔和、平穩。
佔位區塊要與實際版面一致，內容載入時不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

一道亮光掃過灰色佔位圖形。

在[套用位置]加入「骨架微光」(Skeleton Shimmer)，也叫 skeleton wave 或 shimmer effect。
一道柔和的光帶由左往右掃過灰色佔位圖形，下一次掃過前稍微停頓：流暢、不疾不徐。
佔位圖形要與實際版面一致，內容載入時不能跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就顯示靜態佔位。

頁面頂端的細條在換頁過程中緩慢前進，載入完成時走完全程。

在[套用位置]加入「頂部載入條」(Top Loading Bar)，也叫 page progress bar。
頁面載入時，頂端邊緣的細條先快速往前衝，接著越走越慢；載入完成後迅速衝到盡頭並淡出。
在載入真正完成之前絕不能走到盡頭，也不要遮住或推移頁面內容。

對話泡泡中的三個圓點輪流脈動或上浮，表示對方或 AI 正在輸入。

在[套用位置]加入「輸入中指示器」(Typing Indicator)，也叫 typing dots。
對方輸入時，小對話泡泡裡的圓點依序上浮並變亮，節奏柔和、輕緩。
循環要無縫銜接，訊息一到就立刻移除泡泡，並為螢幕閱讀器提供一段簡短的狀態文字來取代圓點。

一道發光脈衝沿著連接兩個元素的線條移動。

在[套用位置]加入「動態光束」(Animated Beam)效果，也叫 connecting beam。
一道短促的發光脈衝沿著連接兩個元素的線條從一端等速移動到另一端，然後重新開始：流暢、平靜。
連接線本身要一直看得見；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就讓脈衝保持靜止。

漸層背景中的顏色緩慢變化、平移或旋轉。

在[套用位置]加入「動態漸層」(Animated Gradient)背景，也叫 gradient animation 或 moving gradient。
漸層的顏色在區域內緩慢平移，柔和、連續地流動，循環重新開始時不能出現明顯的跳動。
上方的文字在每種顏色上都要清楚易讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止移動。

由線條或方塊組成的網格，其中的格子淡入淡出或閃爍。

在[套用位置]加入「動態網格圖樣」(Animated Grid Pattern)背景，也叫 flickering grid 或 grid background。
淺色的網格線保持不動，零星幾個格子在不同時間緩慢淡入淡出：安靜、含蓄，絕不同時亮起。
讓它待在內容後方，不攔截點擊；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止閃爍。

柔和模糊的色帶像極光一樣在內容後方飄動。

在[套用位置]加入「極光背景」(Aurora Background)，也叫 northern lights gradient。
柔和、模糊的色帶在內容後方緩慢飄動搖曳，彼此重疊交融，就像北極光：非常緩慢、如夢似幻。
上方文字要保持清楚易讀，不要每一格畫面都重新對色帶做模糊，以維持流暢；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止飄動。

細細的發光線條沿路徑移動，有時撞到表面會迸散開來。

在[套用位置]加入「背景光束」(Background Beams)效果，也叫 light beams 或 background lines。
背景中鋪著幾條淺色曲線路徑，短短的發光條一條接一條地沿路徑移動，節奏平穩、等速。
光束要錯開時間，絕不同步移動，並放在內容後方；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止光束。

傾斜的方格網格在游標經過時亮起顏色。

在[套用位置]加入「背景方格」(Background Boxes) 效果，也叫 tile hover background。
用傾斜的方格網格鋪滿區域；游標經過的方格要立刻亮起，再慢慢暗回去，留下一段短短的拖尾。
方格要放在內容後面，不能擋住對內容的點擊；在觸控裝置上改為點亮被點按的方格。

一道明亮的高光沿著卡片邊框環繞移動。

在[套用位置]加入「邊框光束」(Border Beam) 效果，也叫 shine border 或 moving border。
一道短而亮的高光沿著卡片邊框以均勻、從容的速度環繞移動，循環時不能出現明顯跳動。
效果不能改變卡片的內容和尺寸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止光束。

點陣以波浪的方式脈動或發光。

在[套用位置]加入「點陣發光」(Dot Pattern Glow) 背景，也叫 dotted glow background 或 dot grid。
細密的點陣保持靜止，一道柔和的光帶緩緩掃過，點亮經過的圓點：平靜而含蓄。
圓點要夠淡，讓上層內容清楚好讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止發光。

一條發光的燈線向兩側展開，向下方的標題投下一道錐形光。

在[套用位置]加入「燈光效果」(Lamp Effect)，也叫 lamp glow。
區塊進入畫面時，一條細細的發光線從中間向兩側展開，向下方的標題投下一道柔和的錐形光，標題同時上浮淡入到位：緩慢而流暢。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示被照亮的標題。

柔和的光束在背景上輕輕搖曳。

在[套用位置]加入「光芒」(Light Rays) 背景，也叫 god rays 或 light shafts。
幾道柔和的半透明光束從頂端呈扇形散開，左右輕輕搖曳，同時略微變亮變暗：緩慢而富有氛圍。
光束要放在內容後面，並且夠淡，不影響閱讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止光束。

多個顏色點平順地交融、漂移，形成有機的多色背景。

在[套用位置]加入「網格漸層」(Mesh Gradient) 背景，也叫 animated mesh gradient。
幾團柔和的色塊彼此交融，在區域內緩慢漂移，讓背景以有機的方式不斷變化：非常緩慢、流暢。
不論顏色怎麼交融，都要讓上層內容清楚好讀；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止漂移。

帶著發光尾跡的斜線劃過卡片或區塊。

在[套用位置]加入「流星」(Meteors) 效果，也叫流星雨 (meteor shower) 或 shooting stars。
幾道帶著漸隱尾跡的小斜線在隨機時刻斜斜劃過區域，每一道都一閃而過。
數量要少，維持點綴的作用，並在區域邊緣裁切；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止流星。

細密的顆粒紋理覆蓋在頁面上，有時像底片顆粒一樣閃動。

在[套用位置]加入「雜訊顆粒」(Noise / Grain Texture) 疊加層，也叫底片顆粒 (film grain) 或 noise background。
一層細密、淺淡的顆粒紋理覆蓋在表面上，像底片顆粒一樣小幅跳動閃爍：要含蓄，絕不能強到讓內容顯得混濁。
點擊要能穿透疊加層；紋理只產生一次，不要每一格都重新產生；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就保持靜止。

大量小圓點在背景中漂浮、彼此連線或對游標做出反應。

在[套用位置]加入「粒子」(Particles) 背景，也叫 floating particles 或 particle field。
大小不一的小圓點各按自己的節奏，沿著柔和、隨意遊走的路徑緩慢漂浮：平靜而輕盈。
圓點數量要適中，在效能較弱的裝置上也保持輕快；離開畫面時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止動畫。