CSS3是一種非常強大的前端技術，可以實現各種驚人的動畫效果。其中一個很酷的動畫效果是左右搖擺，在本文中將會介紹如何使用CSS3實現一個左右搖擺動畫效果。

/* 添加一個容器div并設置樣式 */
.container {
position: relative; /* 設置為相對定位 */
width: 50px; /* 設置寬 */
height: 50px; /* 設置高 */
}
.icon {
position: absolute; /* 設置為絕對定位 */
width: 50px; /* 設置寬 */
height: 50px; /* 設置高 */
transform-origin: center; /* 設置搖擺時的原點 */
animation: rocking 1s ease-in-out infinite; /* 添加動畫效果 */
}
/* 定義搖擺動畫效果 */
@keyframes rocking {
0% {
transform: rotateZ(0deg); /* 初始狀態 */
}
50% {
transform: rotateZ(10deg); /* 向右搖 */
}
100% {
transform: rotateZ(-10deg); /* 向左搖 */
}
}

上述代碼中，首先我們創建了一個容器div，并設置其樣式。然后在容器中添加了一個圖標，它將作為搖擺的主體。接下來，我們將圖標設置為絕對定位，并設置了它的寬、高和搖擺時的原點。最后，添加了核心的動畫效果，即使用關鍵幀@keyframes定義了一組搖擺動畫效果，并將其綁定到圖標上。

需要注意的是，在定義動畫效果時，我們使用了transform屬性來實現旋轉效果，rotateZ表示圍繞Z軸旋轉，而ease-in-out表示動畫效果具有加速度和減速度。最后，我們將動畫持續時間設置為1秒，并無限循環。

這樣就實現了一個簡單的左右搖擺動畫效果，你可以根據自己的需要調整容器和圖標的樣式，以及動畫效果的時間和角度，以實現更加華麗的效果。