Looping Animation of text color change in multiple elements (text) using CSS3

Issue

I was trying to make a multiple texts changing color animation, like this https://vercel.com. I’ve nailed down how to make one text change color through keyframes but I can’t get them to each text change color on a certain pattern.

For instance enter image description here, you have the word Develop in color red, then it should turn to black and change to the word Preview on blue, and then this would turn to black and the word Ship should turn yellow. And finally this should iterate infinitely.

Here I leave the current code in case it helps:

.center {
    margin: 0 auto;
    padding-top: 10rem;
  }
  
  .awesome {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #313131;
    font-size: 45px;
    font-weight: bold;
    position: flex;
    -webkit-animation: color-change-red 10s infinite alternate;
    -moz-animation: color-change-red 10s infinite alternate;
    -o-animation: color-change-red 10s infinite alternate;
    -ms-animation: color-change-red 10s infinite alternate;
    animation: color-change-red 10s infinite alternate;
}

@-webkit-keyframes color-change-red {
    0% { color: red; }
    33.3% { color: black; }
    100% { color: black; }
}
@-moz-keyframes color-change-red {
    0% { color: red; }
    33.3% { color: black; }
    100% { color: black; }
}
@-ms-keyframes color-change-red {
    0% { color: red; }
    33.3% { color: black; }
    100% { color: black; }
}
@-o-keyframes color-change-red {
    0% { color: red; }
    33.3% { color: black; }
    100% { color: black; }
}
@keyframes color-change-red {
    0% { color: red; }
    33.3% { color: black; }
    100% { color: black; }

}

.awesome2 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #313131;
    font-size: 45px;
    font-weight: bold;
    position: flex;
    -webkit-animation: color-change-blue 10s infinite alternate;
    -moz-animation: color-change-blue 10s infinite alternate;
    -o-animation: color-change-blue 10s infinite alternate;
    -ms-animation: color-change-blue 10s infinite alternate;
    animation: color-change-blue 10s infinite alternate;
}

@-webkit-keyframes color-change-blue {
    0% { color: black; }
    33.3% { color: blue; }
    66.6% { color: black; }
}
@-moz-keyframes color-change-blue {
    0% { color: black; }
    33.3% { color: blue; }
    66.6% { color: black; }
}
@-ms-keyframes color-change-blue {
    0% { color: black; }
    33.3% { color: blue; }
    66.6% { color: black; }
}
@-o-keyframes color-change-blue {
    0% { color: black; }
    33.3% { color: blue; }
    66.6% { color: black; }
}
@keyframes color-change-blue {
    0% { color: black; }
    33.3% { color: blue; }
    66.6% { color: black; }
}

.awesome3 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #313131;
    font-size: 45px;
    font-weight: bold;
    position: flex;
    -webkit-animation: color-change-yellow 10s infinite alternate;
    -moz-animation: color-change-yellow 10s infinite alternate;
    -o-animation: color-change-yellow 10s infinite alternate;
    -ms-animation: color-change-yellow 10s infinite alternate;
    animation: color-change-yellow 10s infinite alternate;
}

@-webkit-keyframes color-change-yellow {
    0% { color: black; }
    66.6% { color: yellow; }
    100% { color: black; }
}
@-moz-keyframes color-change-yellow {
    0% { color: black; }
    66.6% { color: yellow; }
    100% { color: black; }
}
@-ms-keyframes color-change-yellow {
    0% { color: black; }
    66.6% { color: yellow; }
    100% { color: black; }
}
@-o-keyframes color-change-yellow {
    0% { color: black; }
    66.6% { color: yellow; }
    100% { color: black; }
}
@keyframes color-change-yellow {
    0% { color: black; }
    66.6% { color: yellow; }
    100% { color: black; }
}
    <div class='center'>
        <p class="awesome">Develop</p>
        <p class="awesome2">Preview</p>
        <p class="awesome3">Ship</p>
    </div>

Solution

One observation is that in the example site you link to it appears that the colored words stay colored for a bit rather than immediately start to merge with black.

This snippet holds them colored for 30% of the animation, then quite swiftly takes them down to black at a third of the way through the animation.

The other observation is that there is a lot of repeated code here which can make it difficult to see what is going on.

This snippet gives each word the same animation but delays the second one by a third of the total animation time and the third one by two thirds.

It also uses a CSS variable for the color so the same keyframes code can be used for each word.

For clarity it also strips out the browser-specific settings – of course put them back in if required in your use case.

.center {
  margin: 0 auto;
  padding-top: 10rem;
}

.awesome {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #313131;
  font-size: 45px;
  font-weight: bold;
  position: flex;
  --duration: 10s;
  animation: color-change var(--duration) infinite;
}

.awesome:nth-child(1) {
  --color: red;
}

.awesome:nth-child(2) {
  --color: blue;
  animation-delay: calc(var(--duration) / 3)
}

.awesome:nth-child(3) {
  --color: yellow;
  animation-delay: calc(var(--duration) * 2 / 3);
}

@keyframes color-change {
  0% {
    color: var(--color);
  }
  30% {
    color: var(--color);
  }
  33.3333% {
    color: black;
  }
  100% {
    color: black;
  }
}
<div class='center'>
  <p class="awesome">Develop</p>
  <p class="awesome">Preview</p>
  <p class="awesome">Ship</p>
</div>

Answered By – A Haworth

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.