提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「縮放出場」(Zoom Out) 退場動畫,也叫 scale out。
元素朝中心縮小並淡出,直到消失:快速,逐漸加速。
完全消失後再從版面和鍵盤焦點中移除;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就立即隱藏。相似的動效
A
Puff In / Puff Out (煙霧入場/出場)
別稱 Puff
元素從放大、模糊、透明的狀態縮小到清晰,像一團煙霧聚攏;離開時則反向進行。
適用情境
物件的柔和出現
在[套用位置]加入「煙霧入場/出場」(Puff In / Puff Out) 動畫,也叫 puff。
出現時,元素從放大、模糊、透明的狀態縮小到清晰,像一團煙霧緩緩落定;離開時再膨脹成一片模糊並消失:柔和、偏快。
放大狀態不要擠動版面或產生捲軸;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接切換。A
元素縮小並滑向一側邊緣,同時淡出。
適用情境
關閉卡片
在[套用位置]加入「回拉出場」(Back Out) 退場動畫。
元素先在原地稍微縮小,再滑向一側邊緣並淡出:一個刻意的兩段式退場,而不是一次快速淡出。
等動畫結束後再移除元素,避免版面在動畫中途跳動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就立即移除。ABCD
Blur Out (模糊出場)
別稱 Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
元素在淡出或滑出的同時逐漸變模糊。
適用情境
柔和的轉場和文字退場
在[套用位置]加入「模糊出場」(Blur Out) 退場動畫,也叫 text blur out 或 smoky text dissipate。
內容在原地越來越模糊並逐漸淡出:柔和、偏慢,彷彿消散一般。
等模糊效果結束後再隱藏或移除元素;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就立即隱藏。A
將滑鼠移到上面
Shrink (縮小)
別稱 Scale Down
游標停在元素上時,元素平順地略微縮小。
適用情境
按鈕、方塊
在[套用位置]加入「縮小」(Shrink) 懸停效果,也叫縮小 (scale down)。
游標停在元素上時,元素平順地略微縮小,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。Entrance & Exit 中的其他動效
A
Back In (回拉入場)
別稱 Back In Up, Back In Down
元素從縮小且偏移的狀態開始,滑入後放大到完整尺寸。
適用情境
首頁主視覺元素和卡片
在[套用位置]加入「回拉入場」(Back In) 進場動畫,也叫 back in up 或 back in down。
元素以縮小且略微透明的狀態從邊緣外進來,到達位置後再放大到完整尺寸:一個刻意的兩段式動作,而不是快速彈出。
只播放一次;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接在原位顯示、不做動畫。ABCD
Blur In (模糊入場)
別稱 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素從嚴重模糊的狀態逐漸變清晰,常伴隨滑入或淡入。
適用情境
標題和首頁主視覺文字的顯現
在[套用位置]加入「模糊入場」(Blur In) 進場動畫,也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始,在原地逐漸變清晰:柔和、偏慢,沒有位移。
只播放一次;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示清晰的文字。