在網頁設計中，動畫效果是不可缺少的一部分。而在CSS3中，有很多可以用于實現動畫效果的屬性和方法。今天我們來介紹一種非常實用的動畫效果——鐘擺效果。

/* 定義元素 */
.swing {
position: relative;
animation: swing 1s ease-in-out infinite alternate;
}
/* 定義動畫 */
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
100% { transform: rotate(-15deg); }
}

上述代碼中，我們先定義了一個元素，類名為“swing”，并設置了其“position”屬性為“relative”，以便后續動畫效果的實現。然后，在其上使用了“animation”屬性，并定義了“swing”這個動畫的時長為1秒，緩動函數為“ease-in-out”，無限循環，并且在每次播放時交替進行。

接著，我們定義了這個“swing”動畫的具體實現方式。其中，“@keyframes”關鍵字表示定義一個動畫效果，在括號中，我們給這個動畫效果取了一個名字——“swing”。在“swing”中，我們通過“transform”屬性來實現將元素旋轉的效果。代碼中，“0%”表示動畫的起始狀態，元素未進行任何變換；“50%”表示動畫進行到一半時，元素向右旋轉15度；“100%”表示動畫結束時，元素又向左旋轉了15度，并回到了起始位置。

到此為止，一個簡單而實用的鐘擺效果就完成了。我們只需要將元素加上這個類名，就可以在網頁中看到動畫效果了。這個效果在實際項目中可以應用于菜單、懸浮按鈕等元素的設計，為頁面添加更多活力。