# CSS Animation / 製作三角形技巧 / 超連結4種狀態

## @keyframes 關鍵影格動畫

透過keyframes來設置動畫的進程和在進程中的變化

      @keyframes moveLeft {
        0% {
          left: 0;
        }
        100% {
          left: 300px;
        }
      }

## Animation 動畫

1. animation-name 動畫名稱(由@keyframe定義)

2. animation-duration 執行時間

3. animation-delay 延遲執行時間

4. animation-iteration-count 執行次數
infinite無限播放

5. animation-direction 執行方向
預設 0 → 100
reverse將進程倒著放 100 → 0
alternate來回播放 0 → 100 100 →0 (一趟算一次)
alternate-reverse 100 →0 0 → 100 (一趟算一次)

6. animation-timing-function 線性變化
linear 不會有加減訴的效果

7. animation-fill-mode 動畫沒有動時執行的動作
forwards 動畫結束停留在最後的狀態
backwards 從動畫開始時起始的狀態開始
both 從動畫開始時起始的狀態開始，並結束後停留在最後的狀態

8. animation-play-state 動畫播放狀態
running (預設)
paused 暫停

### animation shorthand
animation:(name) (duration) (timing-function) (delay) (iteration-count) (direction);

animation 特效庫
https://animate.style/

---

## clip-path

利用點位的方式做三角形

tips 可以用firefox來調整，調整完再將數值貼到程式碼中

# icon

https://fontawesome.com/v4/icons/

1. cdnjs 找到 awesome (這邊舉例版本4.7.0)

https://cdnjs.com/libraries/font-awesome/4.7.0

2. 將第一行網址來源複製貼到HTML head tag 中，這樣就可以在檔案中取用awesome 的 icon

3. 貼完後就可以從 awesome網站中取用圖片的程式碼
:::info
(icon是文字不是圖片，所以可以用文字的相關屬性來改變他)
:::

## 超連結4種狀態

a:link 有herf狀態a

a:visited 已經造訪過的狀態

a:hover 觸碰到a tag範圍的狀態

a:active 按住a tag的狀態

這四個狀態有優先權的概念要照順序寫

a:focus 用tab鍵來操控要移動去頁面的哪裡，放在哪個位子都可以因為會依照優先權的原理來呈現