CSS 動畫效果大全

元素從完全透明逐漸顯現，最基礎也最常用的入場動畫。

元素逐漸層為透明，適合移除、關閉提示等退場場景。

淡入的同時從下方輕微上移，常用於卡片列表依次入場。

淡入同時從上方下落，適合下拉選單與提示條。

從左側滑入並淡入，適合側邊欄與抽屜。

從右側滑入並淡入，適合通知與浮層。

淡入的同時從 92% 放大到原始尺寸，比單純淡入更有力度。

伴隨輕微模糊消退的淡入，適合強調層級切換。

透明度與對比度同時收斂，像膠片溶解。

整體從下方滑入，位移幅度大於淡入上移。

從上方滑入，適合展開式選單。

從右側向左滑入，常用於輪播切換。

從左側向右滑入。

帶彈性回彈的滑入，視覺更活潑。

橫向滑入並帶方向性模糊，模擬高速運動殘影。

新內容從下往上頂替舊內容，常見於步驟切換。

用 clip-path 從左向右揭開，像幕布拉開。

從底部向上揭開內容，適合圖片與標題。

從小放大到正常尺寸，適合模態框與彈層。

縮小並淡出，用於關閉彈層。

快速放大並輕微過衝，模擬彈出感。

週而複始地輕微放大縮小，適合提示可點擊。

兩段節奏不同的放大，模擬心跳。

以中心為原點從零放大，彈性稍強。

先橫向壓扁再回彈到正常，適合按鈕回饋。

緩慢的縮放循環，讓靜態元素保持生命感。

勻速無限旋轉，適合加載指示器。

旋轉 360 度一次後停止。

左右小角度搖擺，常用於圖標強調。

以頂部為軸的鐘擺式擺動。

勻速慢轉，適合加載指示與裝飾環。

從 -180 度轉到 0 度並淡入，像蓋章落下。

以左上角為支點像鉸鏈一樣擺落。

沿 Y 軸翻轉 180 度，適合正反面卡片。

經典的上下彈跳，適合提示箭頭。

幅度更小、更柔和的彈跳。

橫向擠壓變形，像果凍抖動。

縱向拉伸再回彈，富有彈性。

分數段縮放帶過衝，落地感更強。

先蓄力下蹲再起跳，配合輕微拉伸。

從高處落下並回彈兩次，模擬重力。

左右快速抖動，常用於表單校驗失敗。

上下快速抖動。

透明度反複切換，用於強提示。

縮放加旋轉的組合強調動畫。

用外擴陰影製造一圈光環脈衝。

快速小幅左右擺動，用於「不正確」的回饋。

高頻率橫向抖動，適合錯誤提示與通知。

橫豎交替拉伸，像橡皮筋彈動。

繞水平軸翻轉 180 度，需要透視才有立體感。

繞垂直軸翻轉，適合卡片正反面切換。

從背面翻轉到正面並淡入。

從側麵翻轉到正面。

帶透視沿 X 軸翻入，邊緣有厚度錯覺。

模擬立方體繞一條邊翻滾到下一面。

沿 Y 軸翻出並淡出，用於退場。

鼠標移入時元素上浮、陰影加深，卡片與按鈕最常用的懸浮回饋。

移入時輕微放大，適合圖標、頭像與圖片縮略圖。

移入時輕微縮小，營造「被聚焦、被按住」的壓縮感。

移入時旋轉一定角度，帶一點俏皮的手感。

移入時外圈亮起一圈光暈，適合強調可點擊的操作。

一道斜向高光從左側掃過，常用於按鈕與卡片。

移入時繞 Y 軸翻轉半圈，適合正反面資訊切換。

沿 Z 軸上抬並輕微俯仰，做出離螢幕更近的錯覺。

移入時內部的圖標單獨放大旋轉，主體不動，層次更清楚。

按住時縮小，松開回彈，最接近真實按鍵的回饋。

按住時橫向變寬、縱向壓扁，像被手指按扁。

按下後先縮再彈，用一個短促的動畫強調點擊已生效。

按下瞬間外擴一圈波紋，Material 風格的核心回饋。

按下時出現雙層光圈，適合需要明顯確認的次要操作。

按下時快速橫向晃動，用於「不允許」或校驗失敗的回饋。

懸浮放大、按下縮小，一個類就能給按鈕配上完整手感。

懸浮浮起、按下回落，模擬真實按鍵的上下行程。

底部厚邊做成立體按鍵，按下時厚邊變薄。

懸浮後光暈持續呼吸，把視線拉到主操作上。

懸浮時背景漸層橫向推過去，色彩更有流動感。

懸浮時描邊從中心放大浮現，適合次級主行動按鈕。

懸浮時內部箭頭向右推移，暗示「繼續前進」。

點下時白色波紋從中心擴散，深色按鈕上尤其明顯。

懸浮時一道高光斜掃過按鈕，電商與營銷頁常見。

用寬度動畫模擬逐字打出的效果，配合等寬字體更自然。

打字機光標閃爍，通常與打字動畫配合。

漸層高光橫掃，用作加載骨架屏。

緩慢上下漂浮，營造輕盈感。

從模糊到清晰，適合圖片與標題。

陰影大小週期性變化，模擬發光呼吸。

背景漸層位置緩慢移動，形成流動感。

從中心向外擴散並淡出，模擬水波。

圓角比例變化，方塊與圓之間來回形變。

一條高光從左掃到右，佔位骨架屏常用。

漸層文字的高光橫向流動，適合標題。

不規則亮度跳變，模擬老式霓虹燈管。

位移上揚同時陰影變大，營造離地感。

hue-rotate 全環旋轉，讓任意顏色緩慢變色。

用 clip-path 從右往左擦除，可做退場。

裁切角在尖角與斜角之間往複，科技感邊框。

上下輕移的循環，用於提示可繼續滾動。