一、@keyframes 語法規(guī)則
在動(dòng)畫過程中，可以多次更改CSS樣式。指定的變化發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這和0％到100％相同。0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。為了獲得最佳的瀏覽器支持，應(yīng)該始終定義為0％和100％的選擇器。

@keyframes就是個(gè)動(dòng)畫，可以理解成多個(gè)transform組成的一個(gè)組。
語法：
@keyframes 動(dòng)畫名 {
from{ css1}
to{ css2 }
}

@keyframes 動(dòng)畫名{
0% {css1}
50% {css2}
100% {css3}
}
注：使用animation屬性來控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。

二、animation屬性值

當(dāng)調(diào)用這個(gè)動(dòng)畫時(shí)用animation ，animation由六個(gè)屬性組成：

animation-name 指定要綁定到選擇器的關(guān)鍵幀的名稱
animation-duration 動(dòng)畫指定需要多少秒或毫秒完成
animation-timing-function 設(shè)置動(dòng)畫將如何完成一個(gè)周期
animation-delay 設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔
animation-iteration-count 定義動(dòng)畫的播放次數(shù)
animation-direction 指定是否應(yīng)該輪流反向播放動(dòng)畫
animation : 動(dòng)畫名 時(shí)間 速度曲線 開始的時(shí)候延遲 播放次數(shù) 輪流反向播放
舉個(gè)例子看看：

讓正方形從左上角向右上角再向右下角到左下角最后回到左上角，并且顏色也會(huì)隨之變化

div{animation:mymove 5s infinite;
 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}

以上內(nèi)容介紹了動(dòng)畫的使用方法，大家還需要自己動(dòng)手，多敲敲，試試不同的效果！

以上就是CSS3中使用@keyframes創(chuàng)建動(dòng)畫，實(shí)例講解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！