What is the best way to create an animation where every letter in a word transitions to a different

Question

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop?

<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>

The HTML code above separates the word using span tags and classes for each letter.

: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 am looking for a solution to cycle through each letter of the word using a different color every millisecond with minimal code. I have attempted to animate each letter individually, but it resulted in bulky code. Additionally, if there is a way to pause the animation on hover using JavaScript, that would be ideal.

javascript html jquery css

Answer 1

Answer №1

To achieve this effect, follow these steps:


.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}
}

Alternatively, you can modify the code by changing 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}
}

Answer 2

To achieve this effect, follow these steps:


.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}
}

Alternatively, you can modify the code by changing 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}
}

Answer 3

Answer №2

Utilizing JavaScript

Start by creating an array containing various colors
Iterate through each letter in a word and assign a color from the array based on its index position
Repeat this process every 100ms, shifting the starting color index (indexOffset) to apply different colors to each letter in every iteration

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' ensures that the index stays within the bounds of the color array
  })
  indexOffset++
}, 100)

<h1>
  <span>Q</span>
  <span>u</span>
  <span>i</span>
  <span>r</span>
  <span>k</span>
  <span>y</span>
  <span></span>
</h1>

Answer 4

Utilizing JavaScript

Start by creating an array containing various colors
Iterate through each letter in a word and assign a color from the array based on its index position
Repeat this process every 100ms, shifting the starting color index (indexOffset) to apply different colors to each letter in every iteration

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' ensures that the index stays within the bounds of the color array
  })
  indexOffset++
}, 100)

<h1>
  <span>Q</span>
  <span>u</span>
  <span>i</span>
  <span>r</span>
  <span>k</span>
  <span>y</span>
  <span></span>
</h1>

What is the best way to create an animation where every letter in a word transitions to a different

Answer №1

Answer №2

Utilizing JavaScript

Similar questions

Is there a method in React Native to include the "share" icon in my drawer instead of a button?

Tips for handling errors in ajax calls with alternative promises

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

Every time I refresh the app, I am consistently redirected back to the home route "//"

Can JavaScript be utilized to retrieve the MAC address?

Why is the 3D CSS transform (translateZ) feature malfunctioning on Android 4.0.3?

How can you efficiently identify and resolve coding errors or typos in your code?

A guide to smoothly transition box-shadow with jQuery's addClass() function

I'm having trouble getting jQuery to work on a page loaded on an embedded device's browser. How can I troubleshoot this issue?

Using a jQuery modal to submit a button and update data in the window

"The useTheme hook is not functioning as expected when used within a className

Animate the React Bootstrap modal only when it is shown or hidden

iPhone Safari Mobile Browser experiencing issues with sms: and mailto: functionalities

Full image with stylish CSS text overlay

Angular protection filter

Tips for selecting specific elements from an array with jquery

Is there a way to restrict access to my website to only be opened in the Chrome browser?

unable to display images from a folder using v-for in Vue.js

Vanilla JavaScript code that utilizes regex to transform JSON data into an array of blocks, while disregarding any

Customer Notification System Malfunctioning on Front End