css動畫之animation

相對於腳本驅動動畫的優勢

• 更加快捷方便
• 在中等系統中加載性能比js好
• 將動畫序列交給瀏覽器控制，讓瀏覽器對性能優化

animation的配置
我們使用animation屬性及其子屬性對需要應用動畫的元素進行設定，但是實際的展現形式將在@keyframe中定義

子屬性
animation-name：動畫名稱（在@keyframes時使用）
animation-duration:完整動畫的週期
animation-timing-function：動畫的時間函數，在transition中已經列舉
animation-delay：動畫拖延時間
animation-iteration-count：動畫循環次數，infinite無限循環
animation-direction：完成一次動畫時，動畫是改變方向還是從起點重複，alternate時輪流返向播放
連貫寫法：animation: name duration timing-function delay iteration-count direction;

keyframes
- 如果兩個關鍵幀（開始到結束），我們可以使用from和to兩種狀態，或者0%到100%
- 如果是多個關鍵幀，我們只能通過百分比的方式來定義動畫每個關鍵幀的狀態

我們還可以給動畫設置多個屬性值

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;