javascript - 可以为 div 设置动画

Question

所以我正在尝试使用 html、css 和 js 制作一个基本的太空入侵者游戏。我对编码很陌生，而且有点卡住了。当敌人撞到一边时，我很难让他们倒下。

function drawFiende() {
  document.getElementById('fiende').innerHTML = ""
  for (var i = 0; i < fiende.length; i++) {
    document.getElementById('fiende').innerHTML += `<div class='enemy' style='left:${fiende[i].left}px; top:${fiende[i].top}px'></div>`;
  }
}

@keyframes bevegelse {
  0% {
    left: -230px;
    top: 0%;
  }
  50% {
    left: 250px;
    top: 0%;
  }
  51% {
    left: 250px;
    top: 50px;
  }
  100% {
    left: -230px;
    top: 50px;
  }
}

<div id="fiende"></div>

现在我正在使用 CSS 将它从一边移动到另一边，这有点无聊。但我不能让它下降。因为它只会下降 1 次。我试图制作一个带有延迟的 bevegelse_2，但是，这也为原始 “bevegelse” 设置了延迟。 div "fiende" 是我的敌人，而 "bevegelse" 是移动的 div(左右移动)。

Answer 1

CSS 动画不是这样工作的。我知道你想要在他们走到下面的线之后，从那个位置重复动画(再次向下移动他们，再一次)。

CSS 动画从第一帧开始重复，所以要将它们逐行移动到底部，您需要定义所有行的位置(使用 animation-fill-mode: forwards; 添加到元素中，所以它不会动画结束后上去):

@keyframes bevegelse {
  0% {
    left: -230px;
    top: 0%;
  }
  10% {
    left: 250px;
    top: 0%;
  }
  20% {
    left: 250px;
    top: 50px;
  }
  30% {
    left: -230px;
    top: 50px;
  }
  40% {
    left: -230px;
    top: 100px;
  }
  50% {
    left: 0px;
    top: 100px;
  }
  60% {
    left: -230px;
    top: 150px;
  }
  70% {
    left: 0px;
    top: 150px;
  }
  80% {
    left: 0px;
    top: 200px;
  }
  90% {
    left: 230px;
    top: 200px;
  }
  100% {
    left: 230px;
    top: 250px;
  }
}