頁面的制作中，經(jīng)常使用到animation和transition實(shí)現(xiàn)頁面交互動畫效果，達(dá)到頁面最佳的視覺效果，不但可以使頁面更加生動，還可以提升用戶的界面體驗(yàn)，從而增加網(wǎng)站的瀏覽量。
瀏覽器的兼容性，IE10、Firefox 還有 Opera 均支持 animation 屬性，Safari 和 Chrome 是支持替代的 -webkit-animation 屬性，但是IE9 以及更早的版本不支持 animation 屬性。transition現(xiàn)代瀏覽器基本上都支持，但是IE10以下的版本不支持。
animation 和 transition 的用法
animation:
animation-name : 設(shè)置動畫的名稱；animation-duration：設(shè)置動畫完成的時間animation-timing-function：設(shè)置動畫的速度曲線類型；animation-delay：設(shè)置動畫延遲時間; animation-interation-count：設(shè)置動畫播放的次數(shù)；animation-direction: 設(shè)置是否輪流反向播放動畫; animation-play-state：設(shè)置動畫正在播放還是暫停；animation-fill-mode：設(shè)置動畫播放之前或之后，動畫效果是什么狀態(tài)的；
transition：
transition- property：設(shè)置過渡效果的屬性名稱；transition- duration：設(shè)置過渡效果的時間，這個時間是必須要設(shè)置的，否則時間為0，動畫就不會播放了；
transition- timing-function：設(shè)置速度效果的速度曲線類型；transition-delay 設(shè)定過渡效果的延遲時間；
用transition做過渡的效果，用法很靈活，能輕松實(shí)現(xiàn)的效果多重多樣。如用Transition 實(shí)現(xiàn)的hover效果：
如下圖所示：

Html:
<div class = "btn"> <a href=" "> 查看所有產(chǎn)品 </a> </div>
Css:

關(guān)于loading的用animation做的動畫效果：
如下圖1所示：
 

Html:
<div class="load_box" > <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div >
Css:

如下圖2所示：
 

Html
<div class="loading">
<div class="circle">
     <div class="sp sp1">
     <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div>
     </div>
     <div class="sp sp2">
     <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div>
     </div>
     <div class="sp sp3">
     <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div>
     </div>
    </div>
</div>   
Css: