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

Question

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

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

这只能用CSS来实现吗？

Answer 1

​

function move(id,x) {
  document.getElementById(id).style.transitionDuration = (x/200) + 's';
  document.getElementById(id).style.marginLeft = x + 'px';
}

#a,#b {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  transition-timing-function: linear;
}

#a {
  background-color: red;
}

#b {
  background-color: blue;
}

<div id='a' onclick="move('a',400)"></div>
<div id='b' onclick="move('b',250)"></div>
<button onclick="move('a',400);move('b',250)">Or click here!</button>

​

transition-timing-function: linear允许您以线性方式进行转换，而不是在末端加速和减速。此外，我无法找到一个纯CSS解决方案，但一行JavaScript可以创建所需的效果。