Zapętlenie Animacja zmiany koloru tekstu za pomocą CSS3

Question

Mam tekst, który chcę animować. Nie na przykład, ale powoli zmienia kolor z białego na czerwony, a następnie z powrotem na biały.

Oto mój kod CSS do tej pory:

#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

Zastosowanie keyframes i animation nieruchomość

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

Innym 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