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

Shawannashawl

Take a look at developer.mozilla.org/en-US/docs/Web/Guide/CSS/… – Bess

Thank you so much. Such a good source. – Shawannashawl

@Alex Jj You can get rid of the 'px' or any unit when the value is '0'. That you sum up to some bytes worth it on a large CSS file. And leading '0' when digit values. – Makell

Answer 1

Use keyframes and animation property

p {
  font-family: monospace;
  font-size: 3em;
  animation: color-change 1s infinite;
}

@keyframes color-change {
  0% { color: red; }
  50% { color: blue; }
  100% { color: red; }
}

<p>lorem ipsum</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; }
}

Cacography

Answer 2

I have a small css, you can use this

body {
  background-color: #333;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.text-rainbow-animation {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red); 
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
  animation: rainbow-animation 35s linear infinite;
}

@keyframes rainbow-animation {
    to {
        background-position: 4500vh;
    }
}

<div class="text-rainbow-animation">RAINBOW TEXT</div>

Mccomb

Answer 3

Another Sample:

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

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

Lodgings

While this code link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Triplex