如何使用css动画多次更改颜色？

Question

我想用Css动画无限地多次改变文本的颜色。

<div class="footer-
widget-area">
<div class="col-md-3 col-sm- 
6 footer-widget" 
role="complementary">
<div id="text-4" 
class="widget widget_text">          
<div class="textwidget"><p>. 
<a  href="http://4309.co.uk
/contact/">Contact</a></p>
</div>
</div>

Css

#text-4 a{ animation: change 
1s forwards; animation-
delay: 11s;} 

@keyframes change 
{from{color:white;} to 
{color: 
blue;} to{color:yellow;}}

当第二种颜色yellow覆盖第一种颜色blue时，这不起作用。

Answer 1

与百分比一起使用，如：

#text-4 a{ animation: change 
3s forwards infinite; animation-delay: 5s;} 

@keyframes change 
{
0% { color: blue; }
25% { color: orange; }
50% { color: yellow; }
75% { color: black; }
100% { color: red; }
}

<div class="footer-
widget-area">
<div class="col-md-3 col-sm- 
6 footer-widget" 
role="complementary">
<div id="text-4" 
class="widget widget_text">          
<div class="textwidget"><p>. 
<a  href="http://4309.co.uk
/contact/">Contact</a></p>
</div>
</div>

​