HTML過渡與動畫是提升網頁交互體驗的核心技術，主要通過CSS實現動態效果。

過渡

CSS過渡（Transition）介紹

適用于元素屬性變化時的平滑漸變效果，如懸停變色、尺寸調整。通過定義transition-property（過渡屬性）、duration（持續時間）、timing-function（緩動函數）觸發條件（如:hover）。僅需兩段狀態（開始/結束），適合簡單交互。

---

?過渡屬性

• transition-property：指定要過渡的CSS屬性（如width、opacity等），默認all。

• transition-duration：過渡持續時間（如2s），必需屬性。

• transition-timing-function：速度曲線（如ease、linear）。

• transition-delay：延遲開始時間（如0.5s）。

---

基本示例

懸停改變寬度:

.box {width: 100px;transition: width 2s ease-in-out;
}
.box:hover {width: 200px;
}

此代碼的作用為：鼠標懸停時，元素寬度在2秒內以緩入緩出效果從100px過渡到200px。

---

多屬性過渡

同時過渡背景色和字體大小：

.button {background: blue;font-size: 16px;transition: background 0.5s ease-out, font-size 0.3s linear;
}
.button:hover {background: red;font-size: 20px;
}

---

時間函數（Timing Functions）

• 內置曲線：ease（默認）、linear、ease-inease-out、ease-in-out。

• 自定義：cubic-bezier(0.25, 0.1, 0.25, 1)。

.transition {transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

---

延遲與觸發

延遲0.5秒后開始過渡：

.element {transition: opacity 1s ease 0.5s;
}
.element:hover {opacity: 0.5;
}

---

過渡總結

CSS過渡是一種實現元素屬性平滑變化的動畫技術，通過自動補間動畫增強用戶交互體驗。其核心是讓CSS屬性值的變化（如顏色、尺寸等）從初始狀態逐步過渡到終止狀態，而非瞬間切換。

工作原理：過渡需觸發條件（如:hover、:active或JavaScript修改屬性），通過四個屬性控制效果：

transition-property：指定應用過渡的CSS屬性（如width，all表示全部屬性）。

transition-duration：定義動畫時長（如2s）。

transition-timing-function：控制速度曲線，如勻速（linear）、緩入（ease-in）。

transition-delay：設置動畫延遲啟動時間。

適用場景：適合簡單狀態變換，如按鈕懸停效果、菜單展開等。需注意：

避免對width/height等影響布局的屬性過渡，優先使用transform（如縮放）以提升性能。

非繼承屬性需明確指定過渡對象。

過渡相比CSS動畫更輕量，但缺乏多關鍵幀控制，復雜動畫建議使用animation屬性。合理使用過渡能顯著提升界面流暢性與交互友好度。

---

動畫

CSS動畫（Animation）介紹

通過@keyframes定義復雜動畫序列，支持多階段狀態控制，可實現無限循環、反向播放等特性。需綁定動畫名稱、時長、緩動曲線及animation-iteration-count（執行次數）。適合加載動畫、連續特效等場景。

---

?定義關鍵幀：

@keyframes slide-in {from {transform: translateX(-100%);}to {transform: translateX(0);}
}/* 或使用百分比 */
@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}

---

動畫屬性

• animation-name: 關鍵幀名稱（如slide-in）。

• animation-duration: 動畫時長（如2s）。

• animation-timing-function: 速度曲線（同過渡）。

• animation-delay: 延遲時間。

• animation-iteration-count: 播放次數（infinite表示無限循環）。

• animation-direction: 播放方向（normal,?reverse,?alternate）。

• animation-fill-mode: 動畫結束后樣式（forwards保持最后一幀）。

• animation-play-state: 控制播放/暫停（paused,?running）。

---

常見動畫效果示例

淡入淡出：

@keyframes fade {from { opacity: 0; }to { opacity: 1; }
}
.element {animation: fade 0.8s ease-in;
}

旋轉加載：

@keyframes spin {to { transform: rotate(360deg); }
}
.loader {animation: spin 1s linear infinite;
}

滑動菜單：

.menu {transform: translateX(-100%);transition: transform 0.3s ease-out;
}
.menu.active {transform: translateX(0);
}

---

動畫總結

CSS動畫（@keyframes）是創建復雜動態效果的核心技術，通過定義動畫序列實現元素狀態逐幀變化。使用@keyframes 動畫名聲明動畫，通過百分比（0%-100%）或from/to定義多個關鍵幀狀態。每個幀內編寫CSS屬性變化（如transform、opacity等），瀏覽器自動補間生成中間幀。

動畫屬性控制通過animation復合屬性綁定動畫：
animation-name: 關聯@keyframes名稱
duration: 動畫周期（必需）
timing-function: 速度曲線（ease/in-out/cubic-bezier）
delay: 啟動延遲
iteration-count: 播放次數（infinite無限循環）
direction: 播放方向（alternate反向交替）
fill-mode: 結束狀態保持（forwards保留最后一幀）
play-state: 暫停/運行控制

優勢：硬件加速優化（使用transform/opacity）、響應式適配、代碼簡潔。適用于加載動畫、交互反饋、頁面過渡等場景，是增強用戶體驗的重要工具。

總結

? ? ?CSS過渡和關鍵幀動畫是實現網頁動態效果的兩種核心技術。CSS過渡通過平滑改變元素屬性值實現動畫，適用于簡單的狀態切換場景。

? ? ?其核心屬性包括transition-property指定過渡屬性，transition-duration設定持續時間，transition-timing-function控制速度曲線（如ease-in-out），以及transition-delay定義延遲時間。過渡需要觸發條件，常見方式包括:hover偽類或JavaScript修改樣式。例如按鈕懸停時顏色漸變，通過設置transition: background-color 0.3s即可實現。

? ? ?動畫則通過@keyframes規則創建更復雜的動畫序列，允許在動畫周期內定義多個中間狀態。開發者需先聲明關鍵幀名稱及其在不同百分比點的樣式，再通過animation屬性將動畫綁定到元素。關鍵屬性包含animation-name關聯關鍵幀，animation-duration設置總時長，animation-iteration-count控制循環次數，animation-direction定義播放方向。與過渡不同，關鍵幀動畫可自動播放或通過事件觸發，適合實現加載旋轉、輪播圖等需要多階段控制的場景。