How do I animate a word such that each letter changes color

user_14251224 0
Viewed 136

How do I animate a word such that each letter changes color with a range of 7 colors and all letters show diff colors at a time infinitely?

<div class="box">
  <h1 class="logo animate__animated animate__bounceInDown">
    <span class="cake d">D</span>
    <span class="cake y">y</span>
    <span class="cake n">n</span>
    <span class="cake a">a</span>
    <span class="cake m">m</span>
    <span class="cake i">i</span>
    <span class="cake x">x</span>
  </h1>
</div>

here is the HTML word separated by span tags with some classes tags

:root{
  --primary: #22D2A0;
  --secondary: #192824;
  --back: #192824;
  --green: #1FC11B;
  --yellow: #FFD913;
  --orange: #FF9C55;
  --red: #FF5555;
  --aqua: #00ffff;
  --color: #fbff00;
  --blue: #4d1461;
  text-align: center;
}

I want to iterate each letter with a different color so each letter changes color every millisecond with minimal code because I have tried animating each letter separately and it is bulky...if there is also a way to pause the animation on hover using javascript

css html jquery javascript
2 Answers

You can do it by:


.h1{
    height: 200px;
    width: 400px;
    border: 1px solid #000;
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%   {background:#22D2A0;}
    10%  {background:#192824;}
    20% {background:#192824;}
    30% {background:#1FC11B;}
    40% {background:#1FC11B;}
    50% {background:#FFD913;}
    60% {background:#FF9C55;}
    70% {background:#FF5555;}
    80% {background:#00ffff;}
    90% {background:#fbff00;}
    100% {background:#4d1461}
}

@-webkit-keyframes animate_bg {
    0%   {background:#22D2A0;}
    10%  {background:#192824;}
    20% {background:#192824;}
    30% {background:#1FC11B;}
    40% {background:#1FC11B;}
    50% {background:#FFD913;}
    60% {background:#FF9C55;}
    70% {background:#FF5555;}
    80% {background:#00ffff;}
    90% {background:#fbff00;}
    100% {background:#4d1461}
}

or change background to color

.h1{
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%  {color:#22D2A0;}
    10% {color:#192824;}
    20% {color:#192824;}
    30% {color:#1FC11B;}
    40% {color:#1FC11B;}
    50% {color:#FFD913;}
    60% {color:#FF9C55;}
    70% {color:#FF5555;}
    80% {color:#00ffff;}
    90% {color:#fbff00;}
    100% {color:#4d1461}
}

@-webkit-keyframes animate_bg {
    0%  {color:#22D2A0;}
    10% {color:#192824;}
    20% {color:#192824;}
    30% {color:#1FC11B;}
    40% {color:#1FC11B;}
    50% {color:#FFD913;}
    60% {color:#FF9C55;}
    70% {color:#FF5555;}
    80% {color:#00ffff;}
    90% {color:#fbff00;}
    100% {color:#4d1461}
}
user_144163950

Using JavaScript

  1. Create an array of the colors
  2. Loop through word and assign a color from the array to each letter based on the letter position (index)
  3. Run this loop every 100ms, incrementing the initial color (indexOffset) so that different colors are applied to each letter every loop

let colors = [
 '#1fc11b',
 '#ffd913',
 '#ff9c55',
 '#ff5555',
 '#00ffff',
 '#fbff00',
 '#4d1461',
]

let indexOffset = 0

setInterval(() => {
  document.querySelectorAll('h1 span').forEach((letter, index) => {
    letter.style.color = colors[(index + indexOffset) % 7]
    // '% 7' is used to always return a valid array index even when the offset grows larger than the array length
  })
  indexOffset++
}, 100)
<h1>
  <span>D</span>
  <span>y</span>
  <span>n</span>
  <span>a</span>
  <span>m</span>
  <span>i</span>
  <span>x</span>
</h1>

user_66534260
Related