用css动画属性做出一个猫和老鼠的动画场景

好的，以下是一个简单的猫和老鼠的动画场景：

HTML代码：

<div class="cat-and-mouse">
  <div class="cat"></div>
  <div class="mouse"></div>
</div>

CSS代码：

.cat-and-mouse {
  position: relative;
  width: 400px;
  height: 200px;
}

.cat {
  position: absolute;
  top: 100px;
  left: -100px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
  animation: cat-move 2s linear infinite;
}

.mouse {
  position: absolute;
  top: 130px;
  left: 400px;
  width: 30px;
  height: 30px;
  background-color: gray;
  border-radius: 50%;
  animation: mouse-move 2s linear infinite;
}

@keyframes cat-move {
  0% { transform: translateX(0px); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0px); }
}

@keyframes mouse-move {
  0% { transform: translateX(0px); }
  50% { transform: translateX(-200px); }
  100% { transform: translateX(0px); }
}

解释：

首先，创建一个容器 `.cat-and-mouse` 来包含猫和老鼠。

然后，使用 `position: absolute;` 和 `top`、`left` 属性将猫和老鼠放置到正确的位置上。

接着，使用 `animation` 属性和 `@keyframes` 规则来为猫和老鼠添加动画。其中，`cat-move` 和 `mouse-move` 是两个关键帧动画名称。

最后，使用 `transform` 属性设置猫和老鼠的移动效果，让它们看起来像是在追逐对方。

这样，就完成了一个简单的猫和老鼠的动画场景。