如何使用 CSS 过渡更改文本的颜色？

Question

我有一些文字：

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

我希望文字从绿色开始（10 秒后），然后变成蓝色。我不希望它在悬停时触发，而是在带有 class 的元素存在时触发。

Answer 1

您可以看到添加 transition duration 或 transition delay 后颜色如何变化。它甚至可以使用 3 种颜色。如果您想更改为 2 种颜色，您可以轻松删除 50% {color:blue;}.

使用 duration and delay 是我之前提到的另一种方式，但使用 @-webkit-keyframes 和 % 更灵活。

HTML 代码

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

css代码：

.my-class {
    -webkit-animation:name 2s infinite;
}

@keyframes name {
    0% {color:magenta;}
    50% {color:blue;}
    100%{color:green}
}

这是 jsfiddle link sample

Answer 2

您可以简单地通过使用 animation 并使用 animation-delay: 10s; 和 keyframes 来更改颜色 - 没有悬停

它会从绿色开始，10 秒后它会变成你想要的蓝色。

运行下面的代码片段。

.my-class {
  animation-name: blue;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-delay: 10s;
  font-size: 4em;
  color: green;
}

@keyframes blue {
    to { color: blue; }
}

<span class='my-class'>Some text </span> 
<small>I will turn blue in 10 seconds </small>

Answer 3

根据你的问题，从绿色到蓝色需要10s。

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<span class='my-class'>Some text</span>
</body>
</html>

CSS:

.my-class{
animation-delay:8s;
  animation-name: color;
  animation-duration: 2s;
color:green;
animation-fill-mode: forwards;  

}
@keyframes color {
  from {color: green;}
  to {color: blue;}
}

#演示 https://jsbin.com/zusihologo/edit?css

如何使用 CSS 过渡更改文本的颜色？

How can I change the color of text with a CSS transition?

html

css

animation

css-transitions