如何在不跳跃的情况下改变关键帧的速度

Question

我试图通过改变animationDuration来改变关键帧的速度。但是每次我更改animationDuration时，动画框就会改变位置(跳转)。有没有办法不跳就能改变速度？提前谢谢你。代码就在这里，is没有将它们分离到js/css/html文件。

​

var styles;

function togglePlayState(newState) {
  document.getElementById("boxx").style.animationPlayState = newState;
}

var sliderSpeed = document.getElementById("MoveSpeed");
sliderSpeed.oninput = function() {
  styles = window.getComputedStyle(boxx);
  document.getElementById('boxx').style.animationDuration = +sliderSpeed.value.toString() + "s";
  console.log(sliderSpeed.value + "s");
  console.log(styles);
}

body {
  height: 100%;
  top: 0px;
  left: 0px;
  margin-top: 0%;
  margin-left: 0%;
}

.parent {
  background-color: rgb(0, 0, 0);
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: 0%;
}

.boxx {
  background-color: red;
  position: relative;
  height: 50px;
  width: 50px;
  animation: left-to-right 3s forwards infinite alternate linear;
}

.start-animation {
  animation: left-to-right 3s forwards infinite alternate linear;
}

.paused {
  animation-play-state: paused;
}

@keyframes botleft-to-topright {
  /*Koumpi katw aristera Panw deksia*/
  0% {
    left: 0;
    top: calc(100% - 50px);
  }
  100% {
    left: calc(100% - 50px);
    top: 0;
  }
}

@keyframes left-to-right {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: calc(100% - 50px)
  }
}

<div class="parent">

  <div class="boxx" id="boxx"></div>
  <button onclick="togglePlayState('Paused');">Pause Animation</button>
  <!-- Play Pause Buttons  -->
  <button onclick="togglePlayState('Running');">Continue Animation</button>
  <!-- Play Pause Buttons  -->
  <div class="slidecontainer">
    <input type="range" min="1" max="15" value="1" class="slider" id="MoveSpeed">
  </div>
</div>

​

Answer 1

这是不可能做纯css动画的中间动画。为了做到这一点，您需要使用像GSAP这样的js动画库。有关示例，请参见this answer。