我想用CSS动画来模仿猫的脚步。我尝试在容器中动画每个paw（div容器中的img元素），并为容器本身从下到上制作另一个动画。但它看起来就像一个滑动。
使用HTML div元素和.animation-container类来制作一个带有猫爪图像的块，用于CSS动画。使用CSS样式对容器进行定位并限制宽度和高度.

/* CSS container setup */

.animation-container {
  position: absolute;
  bottom: -200px;
  right: 100px;
  width: 350px;
  height: 400px;
  /*opacity: 0;*/
}

.paw-1,
.paw-2,
.paw-3,
.paw-4 {
  margin-right: 20px;
  width: 100px;
  height: 100px;
}

.paw-1,
.paw-2 {
  margin-bottom: 100px;
}

/* CSS animation for each paw start */

.animation-container {
  /* animation: 5s walk forwards; */
}

.paw-2 {
  animation: 1s steps infinite forwards;
}

.paw-3 {
  animation: 1s steps 0.5s infinite forwards;
}

.paw-1 {
  animation: 1s steps 1s infinite forwards;
}

.paw-4 {
  animation: 1s steps 1.5s infinite forwards;
}

@keyframes steps {
  /*Movement*/
  0% 25% {
    transform: translate(0, -100px);
  }
  /*Pause*/
  25% 50% {
    transform: translate(0, -100px);
  }
  /*Movement*/
  50% 75% {
    transform: translate(0, -200px);
  }
  /*Pause*/
  100% {
    transform: translate(0, -200px);
  }
}

/*CSS animation for .animation-container*/

@keyframes walk {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100vh);
  }
}

<!-- Container for CSS animation -->
<div class="animation-container">
  <img class="paw-1" src="https://via.placeholder.com/100x100">
  <img class="paw-2" src="https://via.placeholder.com/100x100">
  <img class="paw-3" src="https://via.placeholder.com/100x100">
  <img class="paw-4" src="https://via.placeholder.com/100x100">
</div>