我們時常在頁面中見到一些動畫效果，這些動畫效果，很多可以只透過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;
例如：一個做圓週運動的小球。下邊是相關程式碼，大家可以在此基礎相做相對應的修改。
<!DOCTYPE html>
<html>
<head>
<title>CSS实现圆周运动小球</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type='text/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);}
}
</style>
</head>
<body>
<p class="class_ball"></p>
</body>
</html>以上是如何使用CSS實現圓週運動小球的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
