如何在单个文本行上进行多个CSS颜色过渡？

Question

我试图在悬停多个颜色过渡时修改文本的颜色，但我只能更改一种颜色。这是我的CSS片段。

#text       {font:9px 'Arial'; color:#000000; transition-duration: 3s;}
#text:hover {color:#FFFFFF;}

不只是#000000到#FFFFFF，而是#000000→#FF0000→#0000FF→#FFFFFF

如何在单个文本行上进行多个CSS颜色过渡？

Answer 1

我建议检查CSS动画的动画关键帧。您可以在任何您喜欢的时间间隔指定文本的状态（在这种情况下，定义文本颜色）。 W3学校有关于这个主题的更多信息，请看这里：http://www.w3schools.com/css/css3_animations.asp

Answer 2

您需要使用CSS Animations，它允许您使用关键帧来定义多个状态更改。

您的示例如下所示：

#text:hover {
    animation: 3s multicolor;
}
@keyframes multicolor {
    0% {
        color: #000;
    }
    33% {
        color: #FF0000;
    }
    66% {
        color: #0000FF;
    }
    100% {
        color: #FFF;
    }
}

这是 demo fiddle ，其中包含-webkit前缀（为简洁起见，在答案中省略）