最近我学习到了一种非常有趣的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);
}
}

对于这个小猫动画，我们需要一个具有相应HTML结构的环境。下面是一段示例HTML代码：

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

为了完成这个有趣的CSS小猫动画，我们需要在CSS中使用关键帧动画。此时我们可以在CSS文件中定义一个名为swing的关键帧动画，然后将其应用于带有cat类的HTML元素。

注：

该CSS代码中 animation 属性值中的 infinite 实现了动画无限循环。

transform-origin 属性用于设置移动起点，这里使用 center bottom 表示居中底部。

现在这个小猫元素将会不断地左右摇摆，给你带来无限的惊喜！