I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text change color in a specific pattern.
For example, take a look at this image: enter image description here. The word Develop begins in red, then switches to black before transitioning to the word Preview in blue. After that, it changes back to black and the word Ship turns yellow. This sequence should repeat endlessly.
Below is the current code that I have been working with:
.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; }
}