如何实现元素前进时上下摆动并平滑右倾？CSS动画求助

我看了你的代码，问题主要出在transform属性的顺序不一致和一个小语法错误上，这直接导致了动画跳变不平滑。咱们一步步来修复：

问题分析 #

1. Transform顺序混乱：CSS的transform属性是按顺序生效的，先旋转再位移和先位移再旋转的坐标系完全不同。你有的关键帧先写translate再写rotate，有的反过来，这就导致元素的移动路径和倾斜角度出现跳变，无法平滑过渡。
2. 语法错误：100%关键帧里的translate(600 px, 100px)多了空格，600 px应该写成600px，否则这个关键帧会失效。
3. 过渡不够自然：默认的animation-timing-function可能会让摆动显得生硬，咱们可以调整它让动画更流畅。

修正后的完整代码 #

<div class="anim-cat-2">
  <img src="https://66.media.tumblr.com/95927edf9e85ece73dac69ade623432c/tumblr_otrmgaTiin1vxe4v6o1_400.png" style="height: 130px;width: 180px;margin-top: 20px;">
</div>

<style>
.anim-cat-2 img {
  animation: animcats 10s infinite ease-in-out; /* 添加ease-in-out让过渡更自然 */
}

@keyframes animcats {
  0% {
    transform: rotate(-15deg) translate(100px, 100px); /* 统一顺序：先旋转，再位移 */
  }
  10% {
    transform: rotate(15deg) translate(150px, -100px);
  }
  20% {
    transform: rotate(-15deg) translate(200px, 100px);
  }
  30% {
    transform: rotate(15deg) translate(250px, -100px);
  }
  40% {
    transform: rotate(-15deg) translate(300px, 100px);
  }
  50% {
    transform: rotate(15deg) translate(350px, -100px);
  }
  60% {
    transform: rotate(-15deg) translate(400px, 100px);
  }
  70% {
    transform: rotate(15deg) translate(450px, -100px);
  }
  80% {
    transform: rotate(-15deg) translate(500px, 100px);
  }
  90% {
    transform: rotate(15deg) translate(550px, -100px);
  }
  100% {
    transform: rotate(-15deg) translate(600px, 100px); /* 修正空格错误 */
  }
}
</style>

关键修改点说明 #

• 统一Transform顺序：所有关键帧都先执行rotate再执行translate，这样每次的位移都是基于旋转后的元素坐标系，保证倾斜角度和摆动方向始终匹配，动画过渡平滑。
• 修复语法错误：把600 px改成600px，确保最后一帧正常生效。
• 优化动画曲线：添加ease-in-out作为动画时间函数，让元素在摆动的起点和终点处减速，模拟更自然的物理摆动效果。

如果想要更贴近真实的摆动感，还可以调整关键帧的y轴位移值（比如把-100px改成-80px，100px改成80px），或者微调旋转角度，让倾斜和摆动的幅度更协调~

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