Question

I have this HTML tag:

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

And I want to give it an animation effect that changes its font color in a red – black infinite loop.

I tried using Webkit Color Transition Loop for background color with 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;
}​

But it doesn’t work.

Reference: http://snipplr.com/view/33728/
My Code: http://jsfiddle.net/LDRR7/9/

Answer 1

You want to be using color as font-color attribute does not exist.

Also note that the tutorial you are using works in webkit browsers but does not work with firefox! So I have added the firefox prefix in.

See 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;
}