Changing Text Color Animation

In this tutorial, you will learn how to change the color of a text with CSS animation. Watch the video below for a detailed tutorial.

HTML

<body>
  <h1>
    <span class="text1">Lorem</span>
    <span class="text2">Ipsum</span>
    <span class="text3">Dolor</span>
    <span class="text4">Sit</span>
    <span class="text5">Amet</span>
  </h1>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 5em;
  text-transform: uppercase;
  text-align: center;
}

h1 span {
  animation: animate 3s linear infinite;
}

.text1 {
  --color1: #86E4CE;
  --color2: #D0E6A4;
  --color3: #FBDD95;
}

.text2 {
  --color1: #F1867A;
  --color2: #CDABDA;
  --color3: #9AD2D2;
}

.text3 {
  --color1: #F5CAC3;
  --color2: #9AD2D2;
  --color3: #F7EDE2;
}

.text4 {
  --color1: #F2B5D4;
  --color2: #EFF7F6;
  --color3: #7BDFF2;
}

.text5 {
  --color1: #AF87CE;
  --color2: #A8F387;
  --color3: #EE5F4C;
}

@keyframes  animate {
  0% {
    color: var(--color1)
  }
  32% {
    color: var(--color1)
  }
  33% {
    color: var(--color2)
  }
  65% {
    color: var(--color2)
  }
  66% {
    color: var(--color3)
  }
  99% {
    color: var(--color3)
  }
  100% {
    color: var(--color1)
  }
}