前言
在CSS3中出現(xiàn)了可以創(chuàng)建動畫的新屬性，它比Flash制作出來的動畫更加的方便桑驱，長話短說直接進(jìn)入正題學(xué)習(xí)竭恬。
創(chuàng)建動畫
創(chuàng)建動畫需要用到@keyframes關(guān)鍵字，Name代表動畫的名稱熬的。from代表0%的位置痊硕，to代表100%的位置，Percentage是百分比值押框，可以去多個百分比的值岔绸。
@keyframes Name {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
...
to {
Properties:Properties value;
}
}
也可以全部寫成百分比的形式：
@keyframes Name {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
...
100% {
Properties:Properties value;
}
}
下面看一個實(shí)際的例子：
@-webkit-keyframes 'move' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
.box {
width: 150px;
height: 150px;
background:yellow;
/* 和動畫起始屬性要一致，否則會出現(xiàn)閃爍 */
margin-left:100px;
/* ---動畫屬性--- */
/*動畫屬性名橡伞，上面keyframes定義的動畫名*/
-webkit-animation-name:'move';
/*動畫持續(xù)時間*/
-webkit-animation-duration: 6s;
/*動畫速度曲線*/
-webkit-animation-timing-function: ease-in-out;
/*動畫延遲時間*/
-webkit-animation-delay: 1s;
/*定義循環(huán)資料盒揉，infinite為無限次*/
-webkit-animation-iteration-count: 4;
/*定義動畫播放方式*/
-webkit-animation-direction: alternate;
}
html代碼：
<body>
<div class="box"></div>
</body>
效果如下：
看完效果后我們分析代碼：
在css中定義了@keyframes動畫關(guān)鍵幀，名字為move兑徘，分別定義了刚盈，0%、40%挂脑、60%藕漱、100%位置時動畫的狀態(tài)。其中@-webkit-是兼容書寫崭闲，下面有提到兼容性問題肋联。
@-webkit-keyframes 'move' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
在動畫物體box上定義基本屬性。
.box {
width: 150px;
height: 150px;
background:yellow;
margin-left:100px;
}
再給動畫物體box上綁定動畫關(guān)鍵幀刁俭，添加動畫相關(guān)屬性即可牺蹄。
.box {
/* ---動畫屬性--- */
-webkit-animation-name:'move';
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
}
動畫相關(guān)屬性介紹：
1. animation-name：
name的取值可以為none，代表無動畫薄翅。
name的取值也可以為多個值沙兰，表示多個動畫一起運(yùn)動氓奈，用逗號隔開。
2. animation-duration：
動畫所持續(xù)的時間長鼎天，單位為秒舀奶。
3. animation-timing-function：
貝塞爾函數(shù)運(yùn)動曲線。
4. animation-delay：
動畫延遲時間斋射，單位為秒育勺。
5. animation-iteration-count：
其默認(rèn)值為“1”；infinite為無限次數(shù)循環(huán)罗岖。
6. animation-direction：
動畫播放方式涧至，有兩個值。normal和alternate桑包。
如果設(shè)置為normal時南蓬，動畫的每次循環(huán)都是向前播放。
如果設(shè)置為alternate哑了，動畫播放在第偶數(shù)次向前播放赘方，第奇數(shù)次向反方向播放。
當(dāng)然也有簡單的合并語法弱左，和transition熟悉一樣窄陡，可以根據(jù)上面的數(shù)字一一對應(yīng)快速記憶。
animation:1[name] 2[duration] 3[timing-function]
4[delay] 5[iteration-count] 6[direction];
默認(rèn)值：1[none] 2[0] 3[ease] 4[0] 5[1] 6[normal]
兼容性
兼容前綴主要是兼容早期各個游覽器版本非標(biāo)準(zhǔn)的實(shí)現(xiàn)拆火。
chrome和safari使用的是-webkit-前綴（之前chrome內(nèi)核是webkit跳夭，現(xiàn)在chrome使用的內(nèi)核是blink）。
ie10+使用的是-ms-前綴们镜。
firefox使用的是-moz-前綴币叹。
opera是用的是-0-前綴。
/* chrome safari */
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
/* firefox */
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
/* ie */
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
/* opera */
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
/* 支持w3c標(biāo)準(zhǔn)新版本游覽器 */
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
用CSS3 Animation配合canvas或者SVG在制作load動畫憎账，音樂播放轉(zhuǎn)動非常方便套硼。animation基本屬性就介紹到這里，趕緊試試吧胞皱。
