CSS中提供了一些動(dòng)畫屬性，可以讓我們的設(shè)計(jì)更加生動(dòng)活潑。其中之一就是“擺動(dòng)”（swing）屬性。通過(guò)設(shè)置擺動(dòng)的弧度（rad）和頻率（Hz），可以讓元素在指定方向上做出周期性的擺動(dòng)動(dòng)畫效果。

.swing {
animation-name: swing;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
transform-origin: center;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(0deg);
}
}

上述代碼中，我們定義了一個(gè)類名為“swing”的元素，然后為其設(shè)置了動(dòng)畫。這個(gè)動(dòng)畫使用了名為“swing”的關(guān)鍵幀，持續(xù)時(shí)長(zhǎng)為2秒，并在0.5秒后開始播放。我們還設(shè)置了該動(dòng)畫無(wú)限循環(huán)播放，并且使用了transform-origin屬性來(lái)指定動(dòng)畫的旋轉(zhuǎn)中心為元素的中心點(diǎn)。

關(guān)鍵幀中，我們定義了元素在0%、50%和100%三個(gè)時(shí)間點(diǎn)的狀態(tài)。0%時(shí)元素不做任何變化，50%時(shí)元素繞中心點(diǎn)順時(shí)針旋轉(zhuǎn)30度，100%時(shí)元素回到初始狀態(tài)。通過(guò)這樣的變化，我們可以讓元素做出一個(gè)反復(fù)的擺動(dòng)效果。

需要注意的是，擺動(dòng)屬性的應(yīng)用需要考慮到元素的大小、位置和旋轉(zhuǎn)角度等因素，以避免出現(xiàn)不自然的效果。同時(shí)，我們也可以在關(guān)鍵幀中設(shè)置其他屬性，如透明度、大小等，來(lái)進(jìn)一步豐富動(dòng)畫效果。