伴隨著Web技術的發展，CSS3成為了前端開發者們必須掌握的一項技能。而CSS3動畫則更是其中的佼佼者。它被廣泛用于PC端和移動端的網頁設計中，能夠讓網頁更為生動、豐富多彩。從下面的示例中，你將會了解到如何通過CSS3動畫，讓網頁變得更加有趣。

/* HTML代碼 */
<button onclick="startAnimation()">點擊開始</button>
<div id="animation" class="animation"></div>
/* CSS3動畫 */
.animation {
width: 50px;
height: 50px;
background-color: #f00;
position: relative;
/* 為動畫的運動路徑設置線性動畫 */
animation-name: circle;
animation-duration: 3s;
animation-timing-function: linear;
/* 動畫結束時保持狀態 */
animation-fill-mode: both;
animation-iteration-count: infinite;
}
/* 定義動畫運動路徑 */
@keyframes circle {
from { left: 0; top: 0; }
to { left: 200px; top: 200px; }
}

在上面的代碼中，我們通過在HTML中添加一個按鈕，并為它添加一個事件，然后定義一個可以移動的紅色塊。在CSS3中，可以通過@keyframes規則來定義一個動畫，這個動畫可以包含一些關鍵幀，其中指定了動畫運動路徑的狀態（from）和結束狀態（to）。最后，我們將這個動畫應用到塊元素上，并設定其運動的時間，速度和是否循環。

當我們點擊“點擊開始”按鈕時，會觸發startAnimation()函數，啟動CSS3動畫。在該函數中，我們獲取到需要進行動畫的元素，并為其添加動畫樣式，實現了我們的動畫效果。

現在，你可以嘗試在你的網站上添加一些JS代碼以使該動畫的運動更加有趣。也可以嘗試使用其他的CSS3動畫屬性，例如transform，transition等，去實現更加復雜的動畫效果。