页面的制作中，经常使用到animation和transition实现页面交互动画效果，达到页面最佳的视觉效果，不但可以使页面更加生动，还可以提升用户的界面体验，从而增加网站的浏览量。
浏览器的兼容性，IE10、Firefox 还有 Opera 均支持 animation 属性，Safari 和 Chrome 是支持替代的 -webkit-animation 属性，但是IE9 以及更早的版本不支持 animation 属性。transition现代浏览器基本上都支持，但是IE10以下的版本不支持。
animation 和 transition 的用法
animation:
animation-name : 设置动画的名称；animation-duration：设置动画完成的时间animation-timing-function：设置动画的速度曲线类型；animation-delay：设置动画延迟时间; animation-interation-count：设置动画播放的次数；animation-direction: 设置是否轮流反向播放动画; animation-play-state：设置动画正在播放还是暂停；animation-fill-mode：设置动画播放之前或之后，动画效果是什么状态的；
transition：
transition- property：设置过渡效果的属性名称；transition- duration：设置过渡效果的时间，这个时间是必须要设置的，否则时间为0，动画就不会播放了；
transition- timing-function：设置速度效果的速度曲线类型；transition-delay 设定过渡效果的延迟时间；
用transition做过渡的效果，用法很灵活，能轻松实现的效果多重多样。如用Transition 实现的hover效果：
如下图所示：

Html:
<div class = "btn"> <a href=" "> 查看所有产品 </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: