如何使用CSS Transition实现文本自动从绿色过渡为蓝色？

嘿，这个需求很容易实现，我给你两种靠谱的方案，你可以根据自己的场景选择：

方案1：纯CSS动画实现（推荐，无需JS） #

这种方法完全用CSS搞定，不需要写JavaScript，简洁高效，适合静态场景：

.my-class {
  /* 初始颜色设置为绿色 */
  color: green;
  /* 定义动画：动画名称changeToBlue，过渡时长0.3秒，延迟10秒执行，执行后保持最终状态 */
  animation: changeToBlue 0.3s ease 10s forwards;
}

/* 定义颜色变化的关键帧 */
@keyframes changeToBlue {
  to {
    color: blue; /* 10秒后切换到蓝色 */
  }
}

• 细节说明：
  • forwards 属性确保动画结束后，元素保持关键帧的最终样式（也就是蓝色）
  • 10s 是延迟执行的时间，你可以改成任意需要的时长
  • 0.3s 是颜色过渡的平滑时长，数值越大变化越慢，按需调整

方案2：JavaScript实现（适合需要动态控制的场景） #

如果之后需要动态修改延迟时间、中途取消过渡，或者结合其他交互逻辑，用JS会更灵活：

<span class='my-class'>Some text</span>

<script>
// 获取页面上所有带有my-class类的元素
const targetElements = document.querySelectorAll('.my-class');

// 遍历每个元素设置初始样式和延迟切换
targetElements.forEach(element => {
  // 初始设置为绿色
  element.style.color = 'green';
  // 给元素加上平滑过渡效果（可选，不加的话颜色会瞬间变化）
  element.style.transition = 'color 0.3s ease';
  
  // 10秒后切换为蓝色
  setTimeout(() => {
    element.style.color = 'blue';
  }, 10000); // 10000毫秒 = 10秒
});
</script>

• 细节说明：
  • querySelectorAll 会选中所有带该类的元素，不管页面上有多少个都能生效
  • 如果不需要平滑过渡，直接去掉transition那一行即可
  • 可以把延迟时间、颜色值改成变量，方便后续动态调整

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