Day 5 — 前端動畫技巧

主題：CSS transition、transform、keyframes 概念
目標：
深入了解前端動畫的核心技巧，掌握如何用 CSS 為網頁元素加入動態效果，提升遊戲或互動頁面的視覺吸引力與互動性。

1. CSS Transition（過渡效果）
   概念：Transition 可以在元素屬性改變時，產生平滑的過渡效果。適合用於狀態改變，例如滑鼠移入、按鈕點擊、顏色或位置變化。

核心語法：

.element {
    transition: 屬性 時間 曲線;
}

例子：

.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: red;
}

重點理解：
Transition 必須有「初始狀態」與「變化狀態」。
可控制過渡時間、延遲時間與速度曲線（ease、linear、ease-in-out 等）。
適合簡單、短暫的動畫效果。

2. CSS Transform（元素變形）
   概念：Transform 可以對元素進行平移（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）等操作，配合 transition 可製作平滑的動態效果。

常用屬性：
translateX() / translateY()：水平或垂直移動
rotate()：旋轉角度
scale()：縮放大小
skew()：傾斜元素

例子：

.card {
    transition: transform 0.5s ease;
}
.card:hover {
    transform: rotateY(180deg) scale(1.1);
}

應用場景：
翻牌遊戲的翻轉效果
角色跳躍或移動動畫
按鈕、圖標縮放或旋轉交互

3. Keyframes Animation（關鍵幀動畫）
   概念：Keyframes 可以定義連續的動畫步驟，適合需要多階段、循環或持續性的動作。Transition 只能處理兩個狀態的變化，而 keyframes 可以控制整個動畫流程。

基本語法：

@keyframes 動畫名稱 {
    0% {屬性值}
    50% {屬性值}
    100% {屬性值}
}
.element {
    animation: 動畫名稱 時間 循環方式;
}

例子：

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
.ball {
    animation: bounce 1s infinite;
}

重點理解：
可控制動畫持續時間、循環次數（infinite / 1 / 2）、延遲、播放方向等。
適合跑酷角色跳躍、背景移動、閃爍效果等需要連續動作的情境。

4. Transition + Transform + Keyframes 的搭配
   Transition + Transform**：簡單互動效果，如滑鼠移入翻轉、縮放、平移等。
   Keyframes + Transform**：連續性動畫，如角色跑動、跳躍、旋轉、彈跳。

實務思路：
小遊戲中的翻牌動畫：使用 transform: rotateY(180deg) 搭配 transition
跑酷角色跳躍：使用 keyframes 定義跳躍軌跡
背景移動或閃爍提示：使用 keyframes 循環動畫

5. 與遊戲設計關聯
   提升互動性：適當的動畫讓使用者操作時有即時反饋，提高遊戲沉浸感。
   增強視覺效果：動態翻牌、角色移動、障礙物進入、按鈕閃爍，都能讓遊戲更生動。
   設計思維：動畫不只是「好看」，也是遊戲規則、提示玩家、強化操作的手段。

Day 5 小結
Transition：平滑過渡兩個狀態的屬性變化，簡單且直觀。
Transform：對元素進行平移、旋轉、縮放、傾斜，與 transition 搭配可做互動效果。
Keyframes：定義多階段、循環動畫，適合跑酷、跳躍或背景連續效果。
這三種技巧是前端動畫核心，能有效增強遊戲畫面互動與視覺表現。