初入CSS第12篇 動畫

動畫的定義和調用

可以使用 @keyframes 來定義畫面,keyframes表示"關鍵幀",再項目上線之前要補上@-webkit-之類的私有前墜

定義完動畫之後可以使用animation的屬性來調用畫面

如果想讓動畫的第2,4,6…(偶數次)自動逆向執行,可以添加alternate參數

如果想讓動畫停止在最後結束狀態,可以加上forwards

多關鍵幀 可以透過0%~100% 來設置中間的效果

動畫實戰

製作此圖時可以先用border和background-color定位