loading動(dòng)畫(huà)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading動(dòng)畫(huà)</title>
<style type="text/css">
.box{
width: 300px;
height: 125px;
border: 1px solid #000;
margin: 200px auto 0;
}
.box p{
text-align: center;
width: 100%;
}
.box div{
width: 30px;
height: 70px;
float: left;
background-color: gold;
margin: 15px;
border-radius: 10px;
}
.box div:nth-child(1){
background-color: red;
animation: loading 500ms ease 0s infinite alternate;
}
.box div:nth-child(2){
background-color: green;
animation: loading 500ms ease 100ms infinite alternate;
}
.box div:nth-child(3){
background-color: pink;
animation: loading 500ms ease 200ms infinite alternate;
}
.box div:nth-child(4){
background-color: greenyellow;
animation: loading 500ms ease 300ms infinite alternate;
}
.box div:nth-child(5){
background-color: cyan;
animation: loading 500ms ease 400ms infinite alternate;
}
@keyframes loading{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.5);
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>loading...</p>
</div>
</body>
</html>
animation動(dòng)畫(huà)
動(dòng)畫(huà)名稱(chēng)、時(shí)間棕叫、曲線耿焊、延遲、播放次數(shù)怀浆、結(jié)束后是否返回谊囚、動(dòng)畫(huà)前后的狀態(tài)
infinite不限制次數(shù)
alternate動(dòng)畫(huà)結(jié)束后返回，返回也算次數(shù)
animation-fill-mode 動(dòng)畫(huà)前后的狀態(tài)
forwards動(dòng)畫(huà)完成保持在最后一幀
backwards在延遲時(shí)間內(nèi)执赡，在動(dòng)畫(huà)顯示之前镰踏，應(yīng)用from開(kāi)始屬性值（例如box寬100，from寬200沙合，在延遲1s內(nèi)顯示200）
both向前和向后填充模式都被應(yīng)用（例如起始按200奠伪，結(jié)束停在最后一幀）
..........................................................................................................................................................
動(dòng)畫(huà)暫停
animation-play-state: paused;
..........................................................................................................................................................
動(dòng)畫(huà)運(yùn)行
animation-play-state: running;
..........................................................................................................................................................
/*定義一個(gè)動(dòng)畫(huà)，名稱(chēng)為moving*/
@keyframes moving{
/*初始狀態(tài)*/
from{
width: 200px;
}
/*結(jié)束狀態(tài)*/
to{
width: 500px;
}
..........................................................................................................................................................
Vendor prefix—瀏覽器引擎前綴首懈，是一些放在CSS屬性前的小字符串绊率，用來(lái)確保這種屬性只在特定的瀏覽器渲染引擎下才能識(shí)別和生效。谷歌瀏覽器和 Safari瀏覽器使用的是WebKit渲染引擎究履，火狐瀏覽器使用的是Gecko引擎滤否，Internet Explorer使用的是Trident引擎，Opera以前使用Presto引擎最仑，后改為WebKit引擎藐俺。一種瀏覽器引擎里一般不實(shí)現(xiàn)其它引擎前綴標(biāo) 識(shí)的CSS屬性，但由于以WebKit為引擎的移動(dòng)瀏覽器相當(dāng)流行泥彤，火狐等瀏覽器在其移動(dòng)版里也實(shí)現(xiàn)了部分WebKit引擎前綴的CSS屬性欲芹。
瀏覽器引擎前綴(Vendor Prefix)有哪些？
-moz-/* 火狐等使用Mozilla瀏覽器引擎的瀏覽器 */-webkit-/* Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 */-o-/* Opera瀏覽器(早期) */-ms-/* Internet Explorer (不一定) */
為什么需要瀏覽器引擎前綴(Vendor Prefix)吟吝？
這些瀏覽器引擎前綴(Vendor Prefix)主要是各種瀏覽器用來(lái)試驗(yàn)或測(cè)試新出現(xiàn)的CSS3屬性特征菱父。可以總結(jié)為以下3點(diǎn)：
試驗(yàn)一些還未成為標(biāo)準(zhǔn)的的CSS屬性——也許永遠(yuǎn)不會(huì)成為標(biāo)準(zhǔn)
對(duì)新出現(xiàn)的標(biāo)準(zhǔn)的CSS3屬性特征做實(shí)驗(yàn)性的實(shí)現(xiàn)
對(duì)CSS3中一些新屬性做等效語(yǔ)義的個(gè)性實(shí)現(xiàn)
這些前綴并非所有都是需要的剑逃，但通常你加上這些前綴不會(huì)有任何害處——只要記住一條浙宜，把不帶前綴的版本放到最后一行：
-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
有些新的CSS3屬性已經(jīng)試驗(yàn)了很久，一些瀏覽器已經(jīng)對(duì)這些屬性不再使用前綴蛹磺。Border-radius屬性就是一個(gè)非常典型的例子梆奈。最新版的瀏覽器都支持不帶前綴的Border-radius屬性寫(xiě)法。
需要使用Vendor Prefixes的CSS3屬性
主要的需要添加瀏覽器引擎前綴(vendor-prefix)的屬性包括：
@keyframes
移動(dòng)和變換屬性(transition-property, transition-duration, transition-timing-function, transition-delay)
動(dòng)畫(huà)屬性 (animation-name, animation-duration, animation-timing-function, animation-delay)
border-radius
box-shadow
backface-visibility
column屬性
flex屬性
perspective屬性
完整的列表不只這些称开，而且還會(huì)增加亩钟。
瀏覽器引擎前綴(vendor-prefix)的用法
當(dāng)需要使用瀏覽器引擎前綴(vendor-prefix)時(shí)乓梨，最好是把帶有各種前綴的寫(xiě)法放在前面，然后把不帶前綴的標(biāo)準(zhǔn)的寫(xiě)法放到最后清酥。比如：
/* 簡(jiǎn)單屬性 */.myClass{-webkit-animation-name: fadeIn;-moz-animation-name: fadeIn;-o-animation-name: fadeIn;-ms-animation-name: fadeIn;animation-name: fadeIn;/* 不帶前綴的放到最后 */}/* 復(fù)雜屬性 keyframes */@-webkit-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 0;}}@-moz-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 0;}}@-o-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 0;}}@-ms-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 0;}}/* 不帶前綴的放到最后 */@keyframes fadeIn{0%{opacity: 0;}100%{opacity: 0;}}
Internet Explorer
Internet Explorer 9 開(kāi)始支持很多(但并不是全部)CSS3里的新屬性扶镀。比如，你也可以在IE里使用不帶瀏覽器引擎前綴(vendor-prefix)的border-radius屬性焰轻。
IE6到IE8都不支持CSS3臭觉，很遺憾的是，使用這些低版本瀏覽器的用戶還很多辱志。所以蝠筑，確保你的網(wǎng)站設(shè)計(jì)在不支持CSS3的情況下也能正常顯示。對(duì)于一些屬性：border-radius,linear-gradient, 和box-shadow, 你可以使用CSS3Pie揩懒，它是一個(gè)很小的文件什乙，把它放到你的網(wǎng)站的根目錄下，就能讓你的頁(yè)面中IE6已球，IE8中也支持這些屬性臣镣。
