小编Mus*_*afa的帖子

基本动画 HTML 和 CSS

所以我只是一个初学者，我只是想弄清楚动画及其工作原理。

我的计划是在一条直线上以无限度数（比方说 90 度）无限地移动球。以下是我想知道的几个问题：

有没有更好的方法来使用具有共同规则和略有不同规则（具有不同旋转）的类？
如何让球在具有不同旋转的新线上移动？

.line,
.line-deg90 {
  background-color: hsl(0, 0%, 0%);
  height: 3px;
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 0 0 -200px;
  transform-origin: 50%;
}

.line-deg90 {
  transform: rotate(90deg);
}

.ball {
  background-color: hsl(0, 0%, 0%);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  left: 0;
  animation: move 2s infinite alternate ease-in-out;
}

@keyframes move {
  0% {
    left: 0px;
    top: -15px;
  }

  100% {
    left: 370px;
    top: -15px;
  }

Run Code Online (Sandbox Code Playgroud)