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

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

關于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: