css3动画显示实现animation属性

css中经常使用的动画属性是animation，可以定制一些需要的动画属性：

div
{
animation:mymove 5s infinite（无限播放动画）;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

animation属性有六个动画属性：

• animation-name             //keyframe动画名称
• animation-duration          //完成动画所需要的时间（秒或毫秒）
• animation-timing-function       // 规定动画的速度曲线
• animation-delay             //规定在动画开始之前的延迟
• animation-iteration-count        //规定动画播放的次数
• animation-direction         //规定是否应该轮流反向播放动画

.class{
  animation: name duration timing-function delay iteration-count direction;
}

example:

 .loading{
  animation: round 2s infinite;
  -webkit-animation: round 2s infinite;
}

<pre name="code" class="css">@keyframes round {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@-webkit-keyframes round {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}