css3關鍵幀動畫以及兼容性策略

一、關鍵幀動畫
animation 屬性
兩個關鍵詞 ：調用動畫 animation。定義關鍵幀(動畫)
@keyframes
1.定義關鍵幀
兼容性前綴
@-webkit-keyframes,谷歌
@-moz-keyframes,火狐
@-ms-keyframes IE,
@-o-keyframes; 歐朋
@keyframes; W3C
語法：
@-webkit-keyframes aniName{
from{
width:100px;
}to{
width:200px;
}
}
@keyframes aniName{
0%{
width:100px;
}
10%{
width:130px;
}
20%{
width:180px;
}
80%{
width:250px;
}
100%{
width:300px;
}
}
2.動畫調用
@-webkit-animation,谷歌
@-moz-animation,火狐
@-ms-animation IE,
@-o-animation; 歐朋
animation:, w3c
注意：animation的各個參數如果分開寫也需要前綴
綜合寫法：
animation:aniName 1s linear 0s infinite alternate(循環) forwords(動畫結束時的樣式) paused(暫停);
組合寫法：
參數一：animation-name:'aniName'; 動畫調用的名稱
參數二：animation-duration:1s; 動畫持續時間
參數三：animation-timing-function:linear; 動畫運行軌跡
linear:勻速軌跡
ease-in：低速開始
ease-out 低速結束
ease:低速，加速，減速
ease-in-out:低速進入，低速結束
cublic-bezier(a,b,c,d) 貝塞爾曲線
https://cubic-bezier.com/#.11,1.01,1,.17
參數四:
animation-delay:1s;動畫延遲屬性，0s是不延遲，如果動畫循環執行多次，那么只有開始的時候會延遲，之后的循環動畫不會延遲
參數五：
animation-iteration-count:10s;
動畫循環次數，整數，infinite 表示無限循環
參數六：
animation-direction:normal;
動畫播放方式
normal:正常的播放
reverse：反向播放
alternate：往返播放
alternate-reverse：反向的往返播放
initial:默認值
inherit：從父元素繼承
參數七：
animation-fill-mode：forwords;動畫執行結束的樣式
none：動畫結束不使用任何樣式到達目的地，返回原來的樣式
forward：動畫結束展示結束時狀態
backwards:動畫結束瞬間回到開始的樣式
both：遵循forward和backwords的規則，在兩個方向上擴展動畫屬性
注意：none和backwards 都會返回原來的樣式
forwards和both都會停在結束時的樣式
參數八：animation-play-state:paused;
動畫播放暫停狀態
paused：暫停狀態
running：動畫正在播放狀態(默認的)
js操控動畫播放或暫停：
box.style.WebkitAnimationPlayState='paused';
3.transition與animation的區別
t：對元素的某個或多個屬性變化進行過渡，形成一個類似的動畫過程，只有開始和結束，需要特殊方式觸發，不能使用js
進行開始暫停的控制，只能執行一次，無法循環
a:對元素一個或多個屬性執行動畫，可以設置多個關鍵幀，不需要觸發就可以直接執行，可以通過js進行精准的控制，
可以無限循環或循環多次
二、兼容性策略
1.平穩退化
對於老版本的瀏覽器，不考慮效果，只要能展示內容即可，平穩退化就是追殲的放棄老版本瀏覽器
2.漸進增強
對於低版本的瀏覽器給與普通的功能，增強高版本瀏覽器的功能和效果，漸進增強就是加強新版本，追殲放棄老版本瀏覽器
3.破罐子破摔
直接禁用老版本瀏覽器
<!-- -->
html5新標簽：header footer section aside main......
ie678雖然不支持，但是可以使用，html5shiv.js,這個文件可以讓低版本口瀏覽器支持新標簽