动画animation

动画animation
@keyframes规则
如需在css3中创建动画，需要学习@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项
css样式，就能创建由当前样式逐渐改为新样式的动画效果。


写规则时至少包含两个属性：规定动画的名称；规定动画的时长


写好规则，再使用animation属性来应用到某个元素
animation：myAnimation 5s;


linear  动画从头到尾的速度是相同的
ease    默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out动画以低速结束
ease-in-out 动画以低速开始和结束。


cd自转例子：
img{
width:100px;height:100px;border-radius:100%;
   }
@keyframes CDturn{
   from{transform:rotate(0deg)}
   to{transform:rotate(360deg)}
}
img:hover{
   animation:3s linear infinite CDturn;
}


<img src="img/cd.jpg" alt=""/>