CSS也能做動畫？
沒錯，CSS也能做動畫！

在看到CSS繪圖之後我在同樣的Pen裡頭又看到了會動的簡單小動畫又激起我的好奇心！
然後我就去Google了

要用CSS做動畫需要
@keysframe & animation

@keysframe的功能是控制動畫效果
可以用百分比來表示，也可以使用from、to
0%和from都表示動畫開頭，100%和to都表示動畫結束

animation則是控制動畫何時開始、結束

animation-name //動畫名稱
animation-duration //動畫週期、秒數
animation-timing-function //速度曲線
animation-delay //動畫何時開始
animation-iteration-count //動畫播放次數
animation-direction //下個週期是否逆向播放
animation-play-state //動畫是否正在運行或暫停

就來做做看顏色變化吧！
一樣先把HTML寫好

<div class="box skin"></div>

我們先在skin上面設定預設的樣式
接著在@keyframes 替動畫命名還有動畫的效果
因為我想要讓顏色慢慢變化因此在50%與100%的時候變換顏色
然後在.box上要套用的animation名稱跟播放秒數就可以看見效果了！

@keyframes color {
    50% {
        background: pink;
    }
    100% {
        background: White;
    }
}

.skin {
    width: 100px;
    height: 100px;
    background: red;
}

.box {
    animation-name: color;
    animation-duration: 5s;
  
}

以上，因為沒有玩得很深入
不過這個真的很有趣，平常都以為動畫效果一定只能靠JS呈現
原來CSS這麼好玩！