如何为渐变文字动画设置间隔？仅用CSS实现黑-彩色-黑循环

完全可以用纯CSS实现你要的效果——文字初始为黑色，过渡到彩色渐变后再回到黑色并停留，形成循环。核心是调整渐变背景的结构和动画关键帧的百分比分配，让黑色状态有足够的停留时间。

修改后的代码： #

HTML

<h2 class="gradient-text">
  Text Example
</h2>

CSS

.gradient-text {
  /* 调整渐变顺序：首尾为黑色，中间是你的彩色 */
  background: linear-gradient(45deg, #000, #2FEBDC, #EB413B, #FFA300, #E422EB, #000);
  background-size: 600%;
  /* 总动画时长10s，linear匀速，infinite循环 */
  animation: text-gradient-with-pause 10s linear infinite;
  padding: 5px 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

@keyframes text-gradient-with-pause {
  /* 0%-20%：保持初始黑色状态（背景位置不动） */
  0%, 20% {
    background-position: 0% 50%;
  }
  /* 20%-80%：滚动背景位置，显示彩色渐变过渡 */
  80% {
    background-position: 100% 50%;
  }
  /* 80%-100%：回到黑色状态并停留 */
  100% {
    background-position: 0% 50%;
  }
}

关键调整说明： #

• 渐变背景结构：在渐变首尾都加入#000（黑色），这样当背景位置在起始或结束点时，文字会显示黑色。
• 动画关键帧分配：把总时长拆分成三个阶段：
  1. 0%-20%：停留黑色，不改变背景位置
  2. 20%-80%：平滑滚动背景位置，展示彩色渐变的过渡效果
  3. 80%-100%：回到黑色位置并停留
• 背景尺寸调整：把background-size从400%改为600%，适配新增的黑色渐变节点，让过渡更自然。

你可以根据需求调整动画总时长（比如把10s改成你想要的时间），或者修改关键帧的百分比（比如把20%改成15%，减少黑色停留时间），来控制间隔的长短。

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