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

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动画库。