簡介：@keyframes定義關鍵幀，即動畫每一幀執行的是什么，animation是來定義動畫的每一幀如何執行的。
一.@keyframe
語法：@keyframes animationname {keyframes-selector {CSS-styles;}}animationname是動畫名字；keyframes-selector幀選擇器，用百分比定義，0%-100%，與from-to等價，作用是定義不同時間段的不同樣式。用法：@keyframes mymove{0% {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100% {top:0px;}}二. animation
該屬性有8個動畫屬性，如下：
animation-name：keyframes名稱；animation-duration： 指定完成動畫所花費的時間，單位為秒（s）或毫秒（ms）；animation-timing-function： 指定動畫的速度曲線，該屬性就不詳細解釋了，與transition的transition-timing-function相同，可見博客：http://blog.csdn.net/picking_up_stones/article/details/54866147animation-delay：指定在動畫開始之間的延遲，單位為秒（s）或毫秒（ms），若為負值表示跳過前幾秒執行；animation-iteration-count： 指定動畫應該播放的次數，默認為1次，自己也可以定義播放次數，如2, 3, 4…….，以及無限次infinite；animation-direction：指定是否應該輪流反向播放動畫。
a. normal：默認值，動畫按正常播放;
b. reverse：動畫反向播放;
c. alternate：動畫在奇數次正向播放，在偶數次反向播放；
d. alternate-reverse：動畫在奇數次反向播放，在偶數次正向播放；
e. initial：設置該屬性為它的默認值；
f. inherit：從父元素繼承該屬性。
animation-fill-mode：指定當動畫不播放時要應用到的樣式（當動畫完成時或動畫有一個延遲未開始播放時）
a. none：默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處
b. forwards：表示動畫在結束后繼續應用最后的關鍵幀的位置
c. backwards：會在向元素應用動畫樣式時迅速應用動畫的初始幀
d. both：元素動畫同時具有forwards和backwards效果
animation-play-state：指定動畫是否正在運行或已暫停，當要實現視頻播放效果時使用
a. paused：指定動畫暫停；
b. running：指定動畫運行；
三. 小例子
<!DOCTYPE html><html><head> <title>@keyframe規則和animation動畫的練習</title> <style type="text/css"> html,body { margin: 0; padding: 0; } .demo { display: flex; flex-direction: row; justify-content: space-around; background: black; height: 670px; } .demo0 { margin-top: 40%; border-radius: 25px; width: 50px; height: 50px; position: relative; } .demo1 { animation: mymove 4s linear infinite; } .demo2 { animation: mymove 4s ease-in-out 2s infinite; } .demo3 { animation: mymove 4s ease-in infinite; } .demo4 { animation: mymove 4s ease-out 1s infinite; } .demo5 { animation: mymove 5s step-start infinite; } .demo6 { animation: mymove 4s ease 2s infinite; } .demo7 { animation: mymove 4s linear infinite; } .demo8 { animation: mymove 4s ease-in-out 1s infinite; } .demo9 { animation: mymove 4s ease-in infinite; } .demo10 { animation: mymove 4s ease-out 1s infinite; } .demo11 { animation: mymove 5s step-start infinite; } .demo12 { animation: mymove 4s ease 2s infinite; } @keyframes mymove { 0% {top:-100px;background:red;} 25% {top:-200px; background:blue;} 50% {top:-300px; background:yellow;} 75% {top:-400px; background:green;} 100% {top:-500px; background:red;} } </style></head><body><div class="demo"> <div class="demo0 demo1"></div> <div class="demo0 demo2"></div> <div class="demo0 demo3"></div> <div class="demo0 demo4"></div> <div class="demo0 demo5"></div> <div class="demo0 demo6"></div> <div class="demo0 demo7"></div> <div class="demo0 demo8"></div> <div class="demo0 demo9"></div> <div class="demo0 demo10"></div> <div class="demo0 demo11"></div> <div class="demo0 demo12"></div></div></body></html>運行效果圖： 
新聞熱點
疑難解答
