如何用CSS实现先加速后匀速的平滑贝塞尔曲线动画？

我想要制作一个CSS动画，初始加速度为0，在指定时长内逐渐加快速度，之后停止加速并保持当前动画速度匀速运行。尝试将ease-in函数与linear函数结合使用，但切换时出现明显减速，过渡不平滑。

我的代码 #

HTML代码 #

<div class="marquee">
  <img>
  <img>
  <img>
</div>

CSS代码 #

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}
.marquee{animation: marquee 30s ease-in 2.1s 1, marquee 30s linear 32.1s infinite;}

问题原因 #

当前写法是拼接两个独立动画，第一个结束后才启动第二个。ease-in动画结束时速度达到峰值，但第二个linear动画是从0速度开始，两者速度不匹配，导致衔接时出现卡顿减速。

解决方案 #

要实现平滑过渡，必须让匀速阶段的速度与加速阶段结束时的速度完全一致，最可靠的方法是用单个关键帧动画分阶段控制时序函数：

/* 自定义先加速后匀速的动画 */
@keyframes marquee-smooth {
  /* 初始状态，使用ease-in实现加速 */
  0% {
    transform: translateX(0%);
    animation-timing-function: ease-in;
  }
  /* 加速阶段结束点，切换为linear保持匀速 */
  /* 这里的百分比根据加速时长占总动画时长的比例调整，比如加速5秒，总时长25秒，就是20% */
  20% {
    transform: translateX(-20%);
    animation-timing-function: linear;
  }
  /* 匀速完成剩余位移 */
  100% {
    transform: translateX(-100%);
  }
}

.marquee {
  /* 总动画时长根据需求调整，这里25秒=5秒加速+20秒匀速 */
  animation: marquee-smooth 25s infinite;
}

原理说明 #

• 前20%的动画过程（对应5秒）使用ease-in时序函数，实现从静止到加速的效果；
• 到达20%位移点时，切换为linear时序函数，保持当前速度匀速完成剩余动画；
• 整个动画是连续的，没有两个独立动画的衔接间隙，自然不会出现卡顿。

如果需要精确控制加速时长和匀速速度，可以根据实际需求调整关键帧的百分比和总动画时长，确保加速阶段结束时的位移比例与时间比例匹配，保证速度平滑过渡。

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