我们时常在页面中见到一些动画效果，这些动画效果，很多可以仅通过CSS来实现。

在这里我们用到了CSS3的animation属性。

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。animation: name duration timing-function delay iteration-count direction;

例如：一个做圆周运动的小球。下边是相关代码，大家可以在此基础相做相应的修改。

CSS实现圆周运动小球

body{background:black;}

.class_ball

{

width:8px;

height:8px;

background:#FFFFFF;

border-radius:4px;

box-shadow:0 0 7px #FFFFFF;

left:200px;

top:200px;

position:absolute;

-webkit-animation:action 2s linear infinite;

}

@-webkit-keyframes action

{

from{transform: rotate(0deg) translate(58px) rotate(0deg);}

to{transform: rotate(360deg) translate(58px) rotate(-360deg);}

}