CSS小球左右搖擺是一種比較有趣的動畫效果。本文將介紹如何使用CSS3的動畫屬性實現這個效果。

.box {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
background-color: #f44336;
border-radius: 50%;
animation: shake 1s ease-in-out infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}

以上代碼包含一個.box類和一個@keyframes規則。.box類設置了小球的樣式和動畫效果。其中，animation屬性指定了動畫名稱(shake)、動畫持續時間(1s)、動畫速度曲線(ease-in-out)和動畫重復次數(infinite)。@keyframes規則定義了四個關鍵幀，每個關鍵幀指定小球的translateX值。通過不同的translateX值，可以讓小球在水平方向上左右搖擺。

使用CSS小球左右搖擺的關鍵在于理解CSS3的動畫屬性和@keyframes規則的使用。通過合理設置樣式和關鍵幀，可以實現各種有趣的動畫效果。