时间戳

首页 > 解决方案 > 如何使用 css 动画多次更改颜色？

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

问题描述

我想用 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;}}

这不起作用，因为 second coloryellow会覆盖 first color blue。

标签： htmlcss-animations

解决方案

与百分比一起使用，例如： 

#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>

推荐阅读