如何用CSS实现猫咪行走动画？现有方案仅呈现滑动效果需优化

问题现状 #

想要用CSS实现猫咪行走的动画效果：容器从底部向上移动，同时容器内的四只爪子交替做出迈步动作，但当前仅能看到容器滑动，爪子没有正确的行走动画。

问题原因 #

1. @keyframes steps的关键帧语法错误，多个百分比值需要用逗号分隔，而非空格
2. 爪子的动画时序逻辑错误，没有模拟真实行走时前后爪交替抬起的规律
3. 容器的walk动画被注释，未启用
4. 爪子的布局仅用margin控制，无法准确模拟四肢位置

修改后的完整代码 #

HTML部分 #

<!-- 猫咪行走动画容器 -->
<div class="animation-container">
  <img class="paw paw-front-left" src="https://via.placeholder.com/100x100" alt="左前爪">
  <img class="paw paw-front-right" src="https://via.placeholder.com/100x100" alt="右前爪">
  <img class="paw paw-back-left" src="https://via.placeholder.com/100x100" alt="左后爪">
  <img class="paw paw-back-right" src="https://via.placeholder.com/100x100" alt="右后爪">
</div>

CSS部分 #

/* 容器基础样式 */
.animation-container {
  position: absolute;
  bottom: -200px;
  right: 100px;
  width: 350px;
  height: 400px;
  /* 用flex布局排列爪子，模拟四肢位置 */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
  /* 启用容器向上移动的动画，时长与爪子动画匹配 */
  animation: walk 5s linear forwards;
}

/* 爪子基础样式 */
.paw {
  width: 100px;
  height: 100px;
}

/* 爪子行走动画：前后爪交替抬起 */
.paw-front-left, .paw-back-right {
  animation: paw-step 1s ease-in-out infinite;
}

.paw-front-right, .paw-back-left {
  animation: paw-step 1s ease-in-out 0.5s infinite;
}

/* 爪子迈步的关键帧动画：抬起-落下循环 */
@keyframes paw-step {
  0%, 100% {
    transform: translateY(0); /* 爪子落地状态 */
  }
  50% {
    transform: translateY(-50px); /* 爪子抬起状态 */
  }
}

/* 容器向上移动的动画 */
@keyframes walk {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100vh); /* 移动到视口顶部 */
  }
}

关键修改说明 #

• 修复了关键帧语法错误，将错误的0% 25%改为0%, 25%的正确格式
• 调整爪子动画分组：左前爪+右后爪为一组，右前爪+左后爪为一组，间隔0.5s启动动画，模拟真实行走的交替迈步
• 启用容器的walk动画，设置linear缓动函数保证匀速移动，时长与爪子动画周期匹配
• 使用flex布局替代margin，更精准地排列四只爪子的位置
• 修改爪子动画的transform逻辑，从单纯向上位移改为上下抬起的循环，更符合行走动作

内容的提问来源于stack exchange，提问作者ilikhachev42