CSS3正是將動畫效果提升到了一個全新的水平，很多舊的瀏覽器不再支持CSS3，對于開發者來說，也需要注意一下。

/* 使用CSS3進行動畫設置 */
/* 設置動畫效果的元素 */
.element {
width: 100px;
height: 100px;
position: relative;
background: red;
animation: move 2s infinite;
}
/* 設置動畫具體的效果 */
@keyframes move {
0% {left: 0;}
50% {left: 500px;}
100% {left: 0;}
}

在上面的代碼中，我們為了設置動畫效果的元素，也就是那個紅色的矩形，我們設置了一些基本的樣式，如寬高、定位、背景顏色等。

接著，我們就使用@keyframes關鍵字來設置這個動畫具體的效果，這里我們設置了3個關鍵幀，分別為0%、50%和100%。

在這3個關鍵幀中我們分別設置元素的位置，我們設置元素從開始狀態向右移動，中間的位置在500px處，最終元素返回到開始的位置。

最后，我們就使用animation屬性來指定這個動畫效果，參數中的move就是我們設置的動畫的名稱，2s則是動畫的時間長度，infinite則表示動畫將無限循環播放。