CSS：

.dragon {
  background-image: url(images/dragon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 180px;
  height: 120px;
  position: absolute;
  bottom: 0;
  left: 2000px;
  animation: ani-dragon 6s linear infinite;
}
@keyframes ani-dragon {
  0% {
    left: 2000px;
  }
  100% {
    left: -500px;
  }
}
.ani-dino {
  animation: ani-dino 1s linear;
}
@keyframes ani-dino {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 300px;
  }
  100% {
    bottom: 0;
  }
}

Javascript语言

let dino = document.querySelector(".dino");
let dragonAnimationTime = parseInt(window.getComputedStyle(dragon).getPropertyValue("animation-duration"));
let dragonPosition = window.getComputedStyle(dragon);
let newAni = 6;

document.addEventListener("keydown", function (e) {
  if (e.key == "ArrowUp") {
    dino.classList.add("ani-dino");

    setInterval(() => {
      if (newAni > 2 && Math.round(parseInt(dragonPosition.left)) < -490) {
        newAni = dragonAnimationTime - 0.1;
        dragon.style.animationDuration = newAni + "s";
        dragon.style.left = "2000px";
        dragonAnimationTime = newAni;
      }
    }, 1);

    setTimeout(() => {
      dino.classList.remove("ani-dino");
    }, "1000");
  }
});

问题是动画的龙，这是假设动画从右到左，是不工作的罚款。因为我正在减少动画时间，每次'箭头'被触发，龙成功地通过它，并前往最左边。动画持续时间正在减少，因为预期和龙动画是越来越快，因为它应该是，但问题来了，龙的动画有时开始随机从任何地方，因为它应该开始每次从极端的权利，根据我的代码，但在之间，它开始有时随机播放，从任何地方的路径，我真的不明白为什么会这样。
我尝试了我能做的一切，我尝试改变持续时间，我尝试改变龙的水平路径的长度，我尝试了不同代码和逻辑的setInterval和setTimeout。
但真的不明白为什么动画有时开始之间的路径，虽然我每次把它的极端权利，一旦它满足条件，减少动画持续时间，也减少了动画持续时间在它的极端权利（-490px），使目前的运行路径不受影响，仍然不工作。
如果有人拿到这个，请帮忙！