摩天樓

動畫 (animations)

接下來要讓畫面動起來

關鍵影格(@keyframes)

動畫就像影片一樣，開始到結束的流程都會由每一個影格所組成，所以一開始要先來定義動畫。

• 建立動畫
  關鍵影格起手式：為動畫命名，這邊取名為wheel。

@keyframes wheel {

}

• 開始結束
  要如同輪子一樣的轉動，關鍵影格0%代表整段動畫的起始，100%代表結束，這時候在動畫的起始設定了transform的屬性，讓它旋轉0度，結束的位置旋轉360度，也就是開始與結束是在一樣的位置。

@keyframes wheel {
    0% {
            transform: rotate(0deg);
        }

    100% {
            transform: rotate(360deg);
        }
}

• 使用動畫
  animation屬性是由多個屬性的簡稱，如同許多屬性一樣，但在還不熟悉之前就一一拆開來使用比較可靠一些，接下來在.wheel這個元素上使用這個動畫。
  animation-name 所使用的動畫名稱，這裡用的是上面定義的wheel。
  animation-duration 動畫持續時間，這裡設定10秒。
  animation-timing-function 動畫轉變時間的加速度方式，linear代表線性，也就是等速度。
  animation-iteration-count 動畫重複次數，infinite表示無限次的重複撥放。

.wheel{
    animation-name: wheel;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

可以預期這個元素就會像一個輪子一樣，從0度轉到360度的地方，等速度的用了10秒鐘，然後無限循環，這就是摩天輪任務中所用到的動畫效果，下一篇將介紹更多的使用方式。

下篇：遊樂園(下)

引用與資源：
freecodecamp
mdn_web_docs_@keyframes
mdn_web_docs_animation
我的摩天樓