仅用CSS实现延迟动画：如何让单词轮换动画在每个单词处暂停

你当前的动画是全程匀速切换位移，没有静止区间，所以无法实现每个单词的停留效果。只需要调整@keyframes的关键帧节点，让相同位移的状态在连续的百分比区间保持，就能实现停留，不需要额外的JS或者复杂属性。

修改后的CSS代码如下，HTML部分完全不需要改动：

.im {
  float: left;
  margin-right: 0.3em;
}

.im-wrapper {
  display: flex;
  height: 1.1em;
}

.im-items {
  overflow: hidden;
}

.im-item {
  display: block;
  height: 100%;
  color: $primary;
  /* 总时长可按需调整，数值越大整体动画越慢 */
  animation: move 10s infinite;
  white-space: nowrap;
}

@keyframes move {
  /* 第一个单词Father停留阶段 */
  0%, 16% {
    transform: translateY(0%);
  }
  /* 切换到第二个单词Mother，切换动画耗时占总时长4% */
  20% {
    transform: translateY(-100%);
  }
  /* 第二个单词Mother停留阶段 */
  20%, 36% {
    transform: translateY(-100%);
  }
  /* 切换到第三个单词Brother */
  40% {
    transform: translateY(-200%);
  }
  /* 第三个单词Brother停留阶段 */
  40%, 56% {
    transform: translateY(-200%);
  }
  /* 切换到第四个单词Sister */
  60% {
    transform: translateY(-300%);
  }
  /* 第四个单词Sister停留阶段 */
  60%,76% {
    transform: translateY(-300%);
  }
  /* 切换到第五个单词Grandma */
  80% {
    transform: translateY(-400%);
  }
  /* 第五个单词Grandma停留阶段 */
  80%,96% {
    transform: translateY(-400%);
  }
  /* 无缝切回第一个单词，完成循环 */
  100% {
    transform: translateY(0%);
  }
}

参数调整说明 #

• 总时长：animation: move 10s infinite中的10s可以任意修改，所有阶段的占比会自动适配总时长
• 停留/切换速度：当前配置每个单词停留占总时长16%，切换动画占4%。如果需要更长停留，可把停留区间的百分比调大、切换区间的百分比差调小，比如把16%改成18%，切换的关键帧改成18%→20%，切换动画就会更快，停留时间更长
• 适配不同数量的单词：如果轮换单词数量变更，只要对应增减关键帧，N个单词的最大位移为-(N-1)*100%即可

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