Text

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

在[套用位置]加入「動態漸層文字」(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)，就停止輪替。