我們時常在頁面中見到一些動畫效果，這些動畫效果，很多可以僅通過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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
