如何调整CSS @keyframes文字轮播动画实现速度先慢后快再回落

你要的初始极慢、逐渐加速、高速保持、最终减速回落的动画效果，可以通过调整animation-timing-function和@keyframes关键帧时间占比两种方式实现，具体修改如下：

方案1：不改动原有轮播逻辑，仅修改加速度曲线 #

如果不需要调整原有的4个文字轮播顺序，只是改变速率变化，直接给span的动画属性添加自定义贝塞尔曲线即可：

span{
  display: block;
  height: 100%;
  padding-left: 10px;
  color: #0e6ffc;
  /* cubic-bezier参数可按需调整，当前参数实现先慢、中快、后慢的速率 */
  animation: spin_words 5s infinite cubic-bezier(0.16, 0.02, 0.88, 0.98);
}

贝塞尔曲线的四个参数取值范围均为0-1，调整前两个参数可以改变初始加速斜率，调整后两个参数可以改变结尾减速斜率。

方案2：新增高速保持阶段，自定义分段速率 #

如果需要中间有一段持续高速轮播的效果，需要修改@keyframes的关键帧分布，给不同阶段配置对应的时间函数：

span{
  display: block;
  height: 100%;
  padding-left: 10px;
  color: #0e6ffc;
  /* 总时长按需调整，这里设为8s方便拆分四个阶段 */
  animation: spin_words 8s infinite;
}

@keyframes spin_words {
  /* 阶段1：0%-20% 初始极慢启动 */
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  20% {
    transform: translateY(-100%);
    animation-timing-function: ease-in;
  }
  /* 阶段2：20%-40% 逐渐加速到峰值 */
  30% {
    transform: translateY(-300%);
  }
  40% {
    transform: translateY(-500%);
    animation-timing-function: linear;
  }
  /* 阶段3：40%-70% 高速匀速保持 */
  50% {
    transform: translateY(-1000%);
  }
  60% {
    transform: translateY(-1500%);
  }
  70% {
    transform: translateY(-2000%);
    animation-timing-function: ease-out;
  }
  /* 阶段4：70%-100% 减速回落至低速 */
  85% {
    transform: translateY(-1200%);
  }
  100% {
    transform: translateY(-400%);
  }
}

你可以根据自己需要的高速保持时长、轮播次数，调整对应区间的关键帧位移和时间占比。

注意：100%关键帧的位移值需要和你实际轮播的文字数量匹配，保证动画循环衔接时没有突兀跳变。

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