CSS动画配置异常：飞船路径动画无法正常运行求助

问题描述 #

我正在实现飞船穿过环形的CSS动画，但配置完成后动画无法正常运行。当为元素添加旋转属性时，飞船会出现异常移动；仅配置路径动画时，则完全没有动作。

原始代码 #

CSS

body {
  background: url(Assets/imgs/Stars.jpg);
}

.spaceship {
  height: 70px;
  animation-name: course;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes course {
  0% {
    top: 10%;
    left: 10%;
  }

  50% {
    top: 20%;
    left: 80%;
  }

  100% {
    top: 2%;
    left: 90%;
  }
}

.circle-1 {
  height: 200px;
}

.circle-1-2 {
  height: 30px;
}

.circle-1-2 {
  height: 90px;
  transform: rotate(90deg);
  position: absolute;
  left: 35%;
}

.circle-2-2 {
  height: 90px;
  position: absolute;
  transform: rotate(270deg);
  left: 24%;
  top: 11.4%;
  z-index: -1;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Space Conquier</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="spaceship">
      <img
        class="spaceship"
        src="/Users/jeandizian/Documents/Code/space/Assets/imgs/spaceship.png"
        alt="spaceship"
      />
    </div>
    <div class="circle-1">
      <img class="circle-1-2" src="Assets/imgs/circle.png" alt="circle" />
      <img class="circle-2-2" src="Assets/imgs/circle.png" alt="circle" />
    </div>
  </body>
</html>

问题原因及修复方案 #

1. 路径动画无响应：缺少定位属性 #

top/left 这类位置属性仅对非静态定位（absolute/relative/fixed）的元素生效，而 .spaceship 默认是 static 定位，导致动画完全没有动作。

修复：给飞船容器添加绝对定位：

.spaceship {
  height: 70px;
  position: absolute; /* 新增定位属性 */
  animation-name: course;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

2. 旋转导致异常移动：重复应用动画类名 #

HTML中，飞船的容器div和内部img同时使用了 .spaceship 类，动画会同时作用在两个元素上，造成位置叠加、旋转冲突的异常效果。

修复：拆分类名，让动画只作用在容器上：

• HTML修改：

<div class="spaceship-container">
  <img
    class="spaceship"
    src="/Users/jeandizian/Documents/Code/space/Assets/imgs/spaceship.png"
    alt="spaceship"
  />
</div>

• CSS修改：

.spaceship-container {
  position: absolute;
  animation-name: course;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spaceship {
  height: 70px;
}

3. 环形元素样式冲突 #

.circle-1-2 类被重复定义两次，后面的样式会覆盖前面的 height:30px，导致样式逻辑混乱。

修复：合并重复的类定义：

.circle-1-2 {
  height: 90px;
  transform: rotate(90deg);
  position: absolute;
  left: 35%;
}

完整修复后代码 #

CSS #

body {
  background: url(Assets/imgs/Stars.jpg);
  margin: 0; /* 移除默认边距，避免页面留白 */
  overflow: hidden; /* 隐藏超出视口的内容 */
}

.spaceship-container {
  position: absolute;
  animation-name: course;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spaceship {
  height: 70px;
  /* 若需要飞船沿路径自动旋转，可添加transform-origin和旋转动画 */
}

@keyframes course {
  0% {
    top: 10%;
    left: 10%;
  }

  50% {
    top: 20%;
    left: 80%;
  }

  100% {
    top: 2%;
    left: 90%;
  }
}

.circle-1 {
  height: 200px;
}

.circle-1-2 {
  height: 90px;
  transform: rotate(90deg);
  position: absolute;
  left: 35%;
}

.circle-2-2 {
  height: 90px;
  position: absolute;
  transform: rotate(270deg);
  left: 24%;
  top: 11.4%;
  z-index: -1;
}

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Space Conquier</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="spaceship-container">
      <img
        class="spaceship"
        src="/Users/jeandizian/Documents/Code/space/Assets/imgs/spaceship.png"
        alt="spaceship"
      />
    </div>
    <div class="circle-1">
      <img class="circle-1-2" src="Assets/imgs/circle.png" alt="circle" />
      <img class="circle-2-2" src="Assets/imgs/circle.png" alt="circle" />
    </div>
  </body>
</html>

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