CSS3-animation,動畫

動畫 Animaion只應用於頁面中已存在的DOM元素上。

　　　　　　
　　　　　　IE10及主流瀏覽器支持，Safari和Chrome加前綴。

　　①animation：可爲一個元素添加多個animation。

　　　　　　

　　　　　　animation-name：給@keyframes定義一個名稱。默認none無效果。
　　　　　　animation-duration：定義動畫一個週期的時間。默認0。單位s。
　　　　　　animation-timing-function：定義動畫的速度曲線。【同transition】
　　　　　　animation-delay：定義過渡效果什麼時候開始。默認0。單位s。
　　　　　　animation-iteration-count：定義循環次數。默認1。infinite無限。
　　　　　　animation-direction：定義播放動畫的方式。
　　　　　　　　normal：先前播放。alternate：偶數次向前播放，基數次反向播放。
　　　　　　animation-play-state：規定動畫播放狀態。
　　　　　　　　running、paused。
　　　　　　　　可用JavaScript經過此屬性控制動畫。

　　　　Animation的屬性變化圖：

　　　　　　

　　②關鍵幀：
　　 　　@keyframes規則：規定動畫效果【CSS樣式】。
　　　　　　1）至少規定動畫名和時長。
　　　　　　2）keyframes的單位必須是百分比值。
　　　　　　關鍵字from和to等同於0%和100%。爲了獲得最佳兼容，應該始終定義0%和100%選擇器。

　　　　　　div1{
　　　　　　　　animation: myfirst1 5s;
　　　　　　}
　　　　　　keyframes myfirst1{
　　　　　　　　from {background:red;}
　　　　　　　　to {background:yellow;}
　　　　　　}


　　　　　　可設置不一樣時間段的動畫：
　　　　　　div2{
　　　　　　　　animation: myfirst2 5s;
　　　　　　}
　　　　　　@keyframes myfirst2{
　　　　　　　　0%   {background: red;}
　　　　　　　　25%  {background: yellow;}
　　　　　　　　50%  {background: blue;}
　　　　　　　　100% {background: green;}
　　　　　　}