Javascript 如何以固定的速度而不是固定的持续时间播放CSS动画/过渡？

我有一个CSS动画，可以使元素沿直线移动未定义的距离。据我所知，动画的持续时间是固定的，所以无论元素移动多远，动画的运行时间总是相同的

如何使动画不具有固定的持续时间，而是具有固定的移动速度？我想要的是“每秒X像素移动”，而不是“整个动画X秒”。我的动画将用于移动不同距离的几个元素，我不想为每个元素制作单独的动画

这只能通过CSS实现吗？

功能移动（id，x）{
document.getElementById（id.style.transitionDuration=（x/200）+'s'；
document.getElementById（id）.style.marginLeft=x+'px'；
}

#a#b{
宽度：50px；
高度：50px；
左边距：10px；
过渡时间函数：线性；
}
#a{
背景色：红色；
}
#b{
背景颜色：蓝色；
}

或者点击这里
功能移动（id，x）{
document.getElementById（id.style.transitionDuration=（x/200）+'s'；
document.getElementById（id）.style.marginLeft=x+'px'；
}
#a#b{
宽度：50px；
高度：50px；
左边距：10px；
过渡时间函数：线性；
}
#a{
背景色：红色；
}
#b{
背景颜色：蓝色；
}

或者点击这里