字体颜色在无限循环中发生变化

Question

我有这个HTML标签:

<div id="alert">Warning!!</div>?

我想给它一个动画效果,在红黑色的无限循环中改变它的字体颜色.

我尝试使用Webkit Color Transition Loop获得带有font-color的背景颜色:

#alert {font-color: #39f !important;}
@-webkit-keyframes colours {
      0% {font-color: #000;}
     50% {font-color: #990000;}
     100% {font-color: #FF0000;}

}
#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}?

但它不起作用.

参考:http
://snipplr.com/view/33728/我的代码:http://jsfiddle.net/LDRR7/9/

Answer 1

您希望使用颜色,因为不存在font-color属性.

另请注意,您使用的教程适用于webkit浏览器,但不适用于Firefox!所以我添加了firefox前缀.

见http://jsfiddle.net/LDRR7/21/

    #alert {color: #39f !important;}
@-webkit-keyframes colours {
     0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}
@-moz-keyframes colours {
      0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}

#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: normal;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: colours;
    -moz-animation-timing-function: ease;
}