Looping Animation of text color change using CSS3

Question

I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again.

Here is my CSS code so far:

#countText{     color: #eeeeee;     font-family: "League Gothic", Impact, sans-serif;     line-height: 0.9em;     letter-spacing: 0.02em;     text-transform: uppercase;     text-shadow: 0px 0px 6px ;     font-size: 210px; } 

Answer 1

Use keyframes and animation property

p {   animation: color-change 1s infinite; }  @keyframes color-change {   0% { color: red; }   50% { color: blue; }   100% { color: red; } }

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>

CSS With Prefixes

p {     -webkit-animation: color-change 1s infinite;     -moz-animation: color-change 1s infinite;     -o-animation: color-change 1s infinite;     -ms-animation: color-change 1s infinite;     animation: color-change 1s infinite; }  @-webkit-keyframes color-change {     0% { color: red; }     50% { color: blue; }     100% { color: red; } } @-moz-keyframes color-change {     0% { color: red; }     50% { color: blue; }     100% { color: red; } } @-ms-keyframes color-change {     0% { color: red; }     50% { color: blue; }     100% { color: red; } } @-o-keyframes color-change {     0% { color: red; }     50% { color: blue; }     100% { color: red; } } @keyframes color-change {     0% { color: red; }     50% { color: blue; }     100% { color: red; } }