Ciclo continuo Animazione del cambio di colore del testo tramite CSS3

Question

Ho il testo che desidero animare. Ad esempio, non al passaggio del mouse, ma cambia continuamente lentamente dal bianco al rosso e poi di nuovo al bianco.

Ecco il mio codice CSS finora:

#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

Usa keyframes e animation proprietà

HTML

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

CSS

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

DEMO

Answer 2

Un'altra SampleL

HTML:

<div class='center'> 

    <p class="awesome">ISN'T THIS AWESOME!</p> 

</div> 

CSS:

.center { 

margin: 0 auto; 

} 

.awesome { 

    font-family: futura; 
    font-style: italic; 

    width:100%; 

    margin: 0 auto; 
    text-align: center; 

    color:#313131; 
    font-size:45px; 
    font-weight: bold; 
    position: absolute; 
    -webkit-animation:colorchange 20s infinite alternate; 


} 

@-webkit-keyframes colorchange { 
    0% { 

    color: blue; 
    } 

    10% { 

    color: #8e44ad; 
    } 

    20% { 

    color: #1abc9c; 
    } 

    30% { 

    color: #d35400; 
    } 

    40% { 

    color: blue; 
    } 

    50% { 

    color: #34495e; 
    } 

    60% { 

    color: blue; 
    } 

    70% { 

    color: #2980b9; 
    } 
    80% { 

    color: #f1c40f; 
    } 

    90% { 

    color: #2980b9; 
    } 

    100% { 

    color: pink; 
    } 
} 

ref: https://codepen.io/raaasin/pen/quvHr