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

Question

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>

You got a lot going on here. Have you inspected the code from the site you're trying to resemble? I would suggest using a text-stroke and using a linear-gradient background. — Kameron
– Kameron, Commented Mar 16, 2022 at 18:44
Thanks, but the gradient is not the issue, the multiple text animations working together is. — Juan Cruz Lafranconi
– Juan Cruz Lafranconi, Commented Mar 16, 2022 at 18:54

A Haworth · Accepted Answer · 2022-03-16 21:25:52Z

2

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 Mar 16, 2022 at 21:25

A Haworth

37.5k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan Cruz Lafranconi Over a year ago

Thanks so much. I was able to add gradients through background-image: linear-gradient(), just in case someone is having issues with that.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related