最近我學(xué)習(xí)到了一種非常有趣的CSS動畫，可以讓小貓左右搖擺，非常可愛！

.cat {
position: relative;
animation: swing 2s ease-in-out infinite;
transform-origin: center bottom;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}

對于這個小貓動畫，我們需要一個具有相應(yīng)HTML結(jié)構(gòu)的環(huán)境。下面是一段示例HTML代碼：

<code>
<div class="cat">
<img src="cat.png" alt="小貓">
</div>
</code>

為了完成這個有趣的CSS小貓動畫，我們需要在CSS中使用關(guān)鍵幀動畫。此時我們可以在CSS文件中定義一個名為swing的關(guān)鍵幀動畫，然后將其應(yīng)用于帶有cat類的HTML元素。

注：

該CSS代碼中 animation 屬性值中的 infinite 實現(xiàn)了動畫無限循環(huán)。

transform-origin 屬性用于設(shè)置移動起點，這里使用 center bottom 表示居中底部。

現(xiàn)在這個小貓元素將會不斷地左右搖擺，給你帶來無限的驚喜！