8.動畫

一、動畫

1. keyframes (關鍵影格)
   語法：
   @keyframes name {
   keyframe { property: value; }
   }
   name：自定義的動畫名稱
   keyframe：from(起始), to(結束), x% (百分比)
   範例8-1
2. animation-name (動畫名稱)
   語法：animation-name: name
3. animation-duration (持續時間)
   語法：animation-duration: time
   時間單位可以是s或ms
4. animation-timing-function (動畫方式)
   語法一：animation -timing-function: ease | linear | ease-in | ease-out | ease-in-out
   語法二：animation -timing-function: cubic(x1, y1, x2, y2) (貝茲曲線)
   語法三：animation -timing-function: step(number, end | start) (步進)
5. animation-delay (延遲時間)
   語法： animation -delay: time
   如250ms，-2s (負值會從轉場效果的中途開始)
6. animation-iteration-count (循環次數)
   語法：animation-iteration-count: number | infinite (重複循環)
7. animation-direction (播放方向)
   語法：animation-direction: normal(正向播放) | alternate(正反向播放)
8. animation-fill-mode (停止模式)
   語法：animation-fill-mode: none | backwards | forwards | both
   在動畫播放前或播放結束後，要停留的樣式
   backwards播放前會停留在from(0%)時，forwards播放後會停留在to(100%)時，both則同時會達成上述二者。
9. animation-play-state (動畫狀態)
   語法：animation-play-state: running | paused
10. animation: name duration timing-function delay iteration-count direction fill-mode play-state; (動畫效果簡寫)
11. 一個簡單的銀河效果 (旋轉+淡入+放大)
12. 練習8-1-跑馬燈：建立一個文字區塊「這是一個跑馬燈」，每一個循環會在10s內從右(margin-left: 500px)到左(margin-left: -350px)顯示文字，文字到區塊中間時會停留2s(40% → 60%, margin-left: 80px;)，滑鼠停放其上則會暫停。