我們時常在頁面中見到一些動畫效果，這些動畫效果，很多可以僅通過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);}

}