平滑过渡到新的CSS动画持续时间

Question

我有一个CSS动画背景位置。

body {
  background: linear-gradient(320deg, #000, #3ff);
  background-size: 10000% !important;
  animation: AnimationName 1s linear infinite;
}

@keyframes AnimationName { 
  0%{background-position:top left}
  50%{background-position:bottom right}
  100%{background-position:top left}
}

通过设置animation-duration样式属性，我可以为用户设置范围滑块以更改速度。麻烦的是，当这个属性发生变化时，动画会突然出现在动画的不同部分。也就是说，如果animation-duration为0.1s并且在一秒左右的时间内更改为5s，则背景位置似乎随机突然出现。你可以在小提琴中看到这个：

https://jsfiddle.net/x97adpe6/2/

我怀疑这种情况正在发生，因为浏览器正在使用某种基于时间的计算来确定动画在给定动画持续时间内的位置，而不是根据它的位置来偏移时间。也就是说，如果动画持续时间从长时间改变到短时间再回到很长时间，效果就好像动画从未长时间改变。

我想要发生的是改变某事物速度的自然结果。我不需要速度之间的任何补间，但我确实希望动画能够以新的速度从现在的任何地方继续。

这是否可行，而不是在JavaScript中重新实现整个动画？