CSS过渡时长不均问题：如何实现小球全程匀速移动？

你遇到的问题是因为CSS transition默认的时间函数是ease——这个函数的曲线特性就是先加速、后减速，所以小球移动会有快慢变化。要让整个移动过程保持匀速，只需要把transition的时间函数设置为linear即可。

具体做法有两种：

• 在CSS中预先定义：

.ball {
  /* 0.5s为移动时长，可根据需求自行调整 */
  transition: top 0.5s linear, left 0.5s linear;
}

• 或者在JavaScript动态设置样式时直接指定：

const ball = document.querySelector('.ball');
// 先设置transition的时间函数为linear
ball.style.transition = 'top 0.5s linear, left 0.5s linear';
// 再设置随机目标位置
ball.style.top = `${Math.random() * window.innerHeight}px`;
ball.style.left = `${Math.random() * window.innerWidth}px`;

linear时间函数的特性就是让动画在整个持续时间内保持恒定的速率，完全符合你需要的匀速移动效果。

内容的提问来源于stack exchange，提问作者Luca Siegel