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

Question

我正在尝试通过更改 animationDuration 来更改关键帧的速度。但每次我更改 animationDuration 时，动画框都会改变位置（跳跃）。有什么办法可以在不跳跃的情况下改变速度？先感谢您。代码在这里，我很抱歉没有将它们分开到 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。

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

How to change speed of a keyframe without it jumping

html

css

keyframe

jss