Font-Color change in an infinite loop

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

Answer 2

Use color , not font-color .

Also, Your animation is wrong, it doesn't fade back to the original color, try this:

#alert {color: #39f !important;}
@-webkit-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: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}​

EXAMPLE: http://jsfiddle.net/pitaj/LDRR7/13/

Answer 3

"font-color" isn't recognized by css. Try "color" instead and change the duration to like 1s to get the "flashy" effect.

Answer 4

it easy to change the color using Css. Call the class and use animation , -webkit-animation attributes.These 2 attributes calls a kind of a function along with it u pass the time in seconds (Example: animation: colorchange 50s; -webkit-animation: colorchange 50s;

). then u change the color inside the function ,in our example its called "colorchange".the way to use the fuction is to use @keyframes colorchange or @-webkit-keyframes colorchange .Simple as such.Another thing to note is the browser.For browser like chrome safari use @-webkit-keyframes colorchange and specify the color.U can c the Magic. An clear example is give down as follow:

#Class .inner {
        -moz-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        -webkit-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        -ms-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        display: -ms-flexbox;
        -ms-flex-align: center;
        -ms-flex-pack: center;
        background: #e74c3c;                                  /*circle circle*/
        border-radius: 100%;
        width: 35em;
        height: 35em;
        padding: 4em;
        text-align: center;
        box-shadow: 0 0 0 1em #FFF;
        cursor: default;

        animation: **colorchange** **50s**;
        -webkit-animation: **colorchange** **50s**;
    }

@keyframes colorchange
{
0%   {background: #e74c3c;}
15%  {background: violet;}
30%  {background:indigo;}
45%  {background: blue;}
60% {background: green;}
75% {background: orange;}
90% {background: purple;}
100% {background: #e74c3c;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0%   {background: #e74c3c;}
    15%  {background: violet;}
    30%  {background:indigo;}
    45%  {background: blue;}
    60% {background: green;}
    75% {background: orange;}
    90% {background: purple;}
    100% {background: #e74c3c;}
}

Hope its easy to understand ('-');

Answer 5

#alert {color: #FF35CE !important; font-weight:700 ;animation:changecolor 5s;
-moz-animation:changecolor 5s; /* Firefox */
-webkit-animation:changecolor 5s; /* Safari and Chrome */
-o-animation:changecolor 5s; /* Opera */
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}

@keyframes changecolor
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}

@-moz-keyframes changecolor /* Firefox */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {background:blue;}
75% {color:green;}
100%   {color:red;}
}

@-webkit-keyframes changecolor /* Safari and Chrome */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}

@-o-keyframes changecolor /* Opera */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}