今天我們要來聊一個超酷的東西，叫做 CSS Animation ，簡單來說，它就是一種讓我們不用寫複雜的 JavaScript，就能讓網頁元素動起來~比如說，像是讓紅色方塊移動，或是做出打字機動畫，都可以靠 CSS Animation 輕鬆實現。

要做出一個動畫，你只需要記住兩個關鍵：

1.animation：

這就像是對一個元素下指令，告訴它「你要去表演一個動畫喔！」你可以在這裡設定動畫的名字、要跑多久、要不要重複播放等等。

2.@keyframes：

這就是動畫的「劇本」。你在這裡面詳細描述動畫的每一個步驟，比如「一開始（0%）的時候是紅色，跑到一半（50%）的時候變藍色，結束時（100%）變透明」。

把這兩個東西組合起來，就能創造出千變萬化的動態效果了！明天我們就來實際寫一個，讓一個方塊動起來當作練習！

補充說明:@-webkit-keyframes

這是 @keyframes 的前綴版本，主要是為了支援舊版的 WebKit 核心瀏覽器（像是早期的 Safari 和 Chrome），但如果你希望動畫在一些舊設備或舊瀏覽器（特別是手機上的舊 Safari）也能正常顯示，那麼就可以多加一份 @-webkit-keyframes 來保險。