Discover the secret to creating a seamless looping effect on text using CSS gradients, giving the illusion of an endless loop

Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this?
Here is a live example of my code on CodePen, and below is the corresponding HTML and CSS:

<pre class="header">
88888888888 888    888 8888888888      8888888b.   .d88888b.   .d8888b.   .d8888b.  888     888 888b     d888      8888888b.  8888888888 888b    888
    888     888    888 888             888   Y88b d88P" "Y88b d88P  Y88b d88P  Y88b 888     888 8888b   d8888      888  "Y88b 888        8888b   888
    888     888    888 888             888    888 888     888 Y88b.      Y88b.      888     888 88888b.d88888      888    888 888        88888b  888
    888     8888888888 8888888         888   d88P 888     888  "Y888b.    "Y888b.   888     888 888Y88888P888      888    888 8888888    888Y88b 888
    888     888    888 888             8888888P"  888     888     "Y88b.     "Y88b. 888     888 888 Y888P 888      888    888 888        888 Y88b888
    888     888    888 888             888        888     888       "888       "888 888     888 888  Y8P  888      888    888 888        888  Y88888
    888     888    888 888             888        Y88b. .d88P Y88b  d88P Y88b  d88P Y88b. .d88P 888   "   888      888  .d88P 888        888   Y8888
    888     888    888 8888888888      888         "Y88888P"   "Y8888P"   "Y8888P"   "Y88888P"  888       888      8888888P"  8888888888 888    Y888
  </pre>

.header{

  text-align: center;

  font-family: monospace;
  display:block;
  background-image: 
  linear-gradient(to right, #ff0000 0%, #ff9a00 10%, #d1de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: move 35s linear infinite;
}

@keyframes move {
    to {
        background-position: 1600vh;
    }
}

Any help or insights would be greatly appreciated as I'm struggling with this. Thank you!

htmlcss

Answer №1

When the text is displayed in monospace font, we have the ability to set the width of the block using ch units.

To ensure that the text remains centered within the header while being assigned the ch width, this code snippet creates an animation where the background moves from left to right, covering the width of the text (similar to the original query but with a shorter distance). The repetition of this animation ensures a smooth transition without any flickering effects.

.header .inner{
  --len: 148ch;
  width: var(--len);
  padding: 0;
  margin: 0 auto;
  text-align: center;
  font-family: monospace;
  display:block;
  background-image: 
  linear-gradient(to right, #ff0000 0%, #ff9a00 10%, #d1de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #ff0000 100%);
  background-position: 0 0, 0 0;
  background-color: pink;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: move 1s linear infinite;
}

@keyframes move {
    to {
        background-position: var(--len) 0, 0 0;
    }
}

body{
  background:#000000;
}
<div class="header">
<pre class="inner">





88888888888 888    888 8888888888      8888888b.   .d88888b.   .d8888b.   .d8888b.  888     888 888b     d888      8888888b.  8888888888 888b    888
    888     888    888 888             888   Y88b d88P" "Y88b d88P  Y88b d88P  Y88b 888     888 8888b   d8888      888  "Y88b 888        8888b   888
    888     888    888 888             888    888 888     888 Y88b.      Y88b.      888     888 88888b.d88888      888    888 888        88888b  888
    888     8888888888 8888888         888   d88P 888     888  "Y888b.    "Y888b.   888     888 888Y88888P888      888    888 8888888    888Y88b 888
    888     888    888 888             8888888P"  888     888     "Y88b.     "Y88b. 888     888 888 Y888P 888      888    888 888        888 Y88b888
    888     888    888 888             888        888     888       "888       "888 888     888 888  Y8P  888      888    888 888        888  Y88888
    888     888    888 888             888        Y88b. .d88P Y88b  d88P Y88b  d88P Y88b. .d88P 888   "   888      888  .d88P 888        888   Y8888
    888     888    888 8888888888      888         "Y88888P"   "Y8888P"   "Y8888P"   "Y88888P"  888       888      8888888P"  8888888888 888    Y888</pre>
</div>

Answer №2

consider the following where you don't need any hardcoded values:

.header{
  font-family: monospace;
  display:inline-block;
  color:transparent;
  background: 
  linear-gradient(90deg, #ff0000 0%, #ff9a00 10%, #d1de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #ff0000 100%)
    left/50% 100%; /* 50% = half the width*/
  -webkit-background-clip: text;
  background-clip: text;
  animation: move 1s linear infinite;
}

@keyframes move {
  to {
    background-position: right; /* you simply animate to right*/
  }
}

body {
  background:#000;
  text-align: center;
}
<pre class="header">
88888888888 888    888 8888888888      8888888b.   .d88888b.   .d8888b.   .d8888b.  888     888 888b     d888      8888888b.  8888888888 888b    888
    888     888    888 888             888   Y88b d88P" "Y88b d88P  Y88b d88P  Y88b 888     888 8888b   d8888      888  "Y88b 888        8888b   888
    888     888    888 888             888    888 888     888 Y88b.      Y88b.      888     888 88888b.d88888      888    888 888        88888b  888
    888     8888888888 8888888         888   d88P 888     888  "Y888b.    "Y888b.   888     888 888Y88888P888      888    888 8888888    888Y88b 888
    888     888    888 888             8888888P"  888     888     "Y88b.     "Y88b. 888     888 888 Y888P 888      888    888 888        888 Y88b888
    888     888    888 888             888        888     888       "888       "888 888     888 888  Y8P  888      888    888 888        888  Y88888
    888     888    888 888             888        Y88b. .d88P Y88b  d88P Y88b  d88P Y88b. .d88P 888   "   888      888  .d88P 888        888   Y8888
    888     888    888 8888888888      888         "Y88888P"   "Y8888P"   "Y8888P"   "Y88888P"  888       888      8888888P"  8888888888 888    Y888
  </pre>
  
  <pre class="header" style="font-size:5px">
<!-- Unique content goes here -->
</pre>

Another variant:

.header{
  font-family: monospace;
  display:inline-block;
  color:transparent;
  background: 
  linear-gradient(90deg, #ff0000 0%, #ff9a00 10%, #d1de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #ff0000 100%)
    left/200% 100%; /* 200% = twice the width*/
  -webkit-background-clip: text;
  background-clip: text;
  animation: move 1s linear infinite;
}

@keyframes move {
  to {
    background-position: -200% 0; 
  }
}

body {
  background:#000;
  text-align: center;
}
<pre class="header">
<!-- Unique content goes here -->
</pre>
  
  <pre class="header" style="font-size:5px">
<!-- Unique content goes here -->
</pre>

Related question to get more detail about the values: Using percentage values with background-position on a linear-gradient

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

I am currently in the process of transitioning an app from jQuery/Bootstrap3 to Vue/Vuetify. My approach is to tackle one small task at a time, such as converting the Navbar into its own Vue component and then gradually updating other widgets. Since the n ...

cssvue.jstwitter-bootstrap-3vuetify.js

What are the steps for integrating a CMS with my unique website design?

Currently, I am in the process of creating a unique website for a client using my own combination of html, css, and JavaScript. There is also a possibility that I may incorporate vueJS into the design. The client has expressed a desire to have the ability ...

javascriptcsswordpresshtmlcontent-management-system

Choose all the HTML content that falls within two specific tags

Similar Question: jquery - How to select all content between two tags Let's say there is a sample HTML code as follows: <div> <span> <a>Link</a> </span> <p id="start">Foo</p> <!-- lots of random HTML ...

javascriptjqueryhtml

Ways to display a checked or unchecked checkbox in react depending on a boolean value obtained from an API

Is there a way to display a checked or unchecked checkbox in react jsx depending on a boolean value retrieved from an api? ...

htmlreactjsjsx

Is there a way to prevent a web page from automatically refreshing using JavaScript?

I would like my webpage to automatically refresh at regular intervals. However, if a user remains inactive for more than 5 minutes, I want the refreshing to stop. There is an example of this on http://codepen.io/tetonhiker/pen/gLeRmw. Currently, the page ...

javascriptjqueryhtml

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

Currently, I have integrated the intl-tel-input library into my project for selecting international telephone numbers from a dropdown menu. While accessing the application on a web browser, the country flags display correctly with the intended styling. Ho ...

cssangularjssassmobile-websiteintl-tel-input

A guide on incorporating an event to multiple elements in vue.js

I am trying to implement a double-click event on multiple elements in Vue3. My goal is to create a table of contents data and add a double-click event to the checkboxes and favorite icons without using @dblclick="". I find it more convenient to assign a c ...

javascripthtmlvue.jsdomdom-events

Trouble displaying portrait images in CSS slideshow

My portfolio includes an image slider called wow slider, which can be found at You can view my site with the image slider on this page: http://jackmurdock.site50.net/StudioWork.hmtl While most of the galleries display portrait and landscape images correc ...

jqueryhtmlcss

Shopping cart feature in PHP - Ajax response only functioning once

I'm in the process of developing a shopping cart. I start by adding products to the cart, then use Ajax to dynamically update the quantity when it changes. Everything works smoothly after the first change, but subsequent quantity updates do not refres ...

javascriptphpjqueryhtmlajax

Tips for getting my navigation bar menu button functioning properly?

I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...

htmlcss

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar beha ...

jquerycsshtmlscrollbar

Mobile devices do not support HTML5 Video playback

Here is the HTML5 Video code I am using: <div id="lightBox1" class="lightBox"> <video id="video" controls preload="metadata"> <source width="100%" height="470" src="/ImageworkzAsia/video/iworkzvid.mp4" type="video/mp4"> ...

javascriptjqueryhtmlvideo

What is the best way to prevent HTML escaping in a HAML form?

I am facing an issue when I edit my HAML form as it renders the &ampersand; value in the text field. Even though I have set escape_html to true, it still displays the &ampersand; value. What could be the mistake on my end? Am I using the correct sy ...

htmlruby-on-railshaml

HTML5 input type Color displays individual RGB values

This code snippet opens up a variety of options for the user to manipulate different color values such as R, G, B, HEX VALUE, HUE, etc. However, the specific requirement is to only extract the Red value. <input id="color_pick"type="color" value="#ff0 ...

javascripthtml

Unable to send messages through contact form - Issue with HTML/CSS

I had successfully achieved the desired outcome before, but now I am facing difficulties replicating it. The linked image displays my intended result versus what is currently happening. https://i.stack.imgur.com/QUCuN.png What could be causing this issue ...

htmlcss

a guide on configuring a default input value from a database in a React component

In my current project, I have an input field with the type of "checkout" and I am looking to utilize Firestore to retrieve a default value. Once I obtain this value, I plan to store it in the state so that it can be modified and updated as needed. Here i ...

javascripthtmlreactjsfirebasegoogle-cloud-firestore

Animating an image with CSS steps to create a captivating shaking

My attempt at creating a basic animation is not producing the desired smoothness. .animate { animation: motion 1.5s steps(27) forwards; } @keyframes motion { 100% { background-position: -5778px; } } <div class="animate ...

htmlcssanimation

Trouble encountered in aligning two DIVs in a horizontal position

I have been through numerous discussions on the same problem, but none of the solutions seem to work in my case. I am currently working on a section of my website that has 3 small boxes, each containing an image on top and text below. The issue arises when ...

csshtml

Move the width from left to right with animation

Currently, I am exploring ways to use jQuery to create an animation effect on a div where the width shrinks from left to right. My first step is to have the element animate as follows: Slide in from left to right Then continue moving to the right off th ...

jquerycss

Trouble with z-index | initial div out of four malfunctioning

Currently, I am attempting to practice by replicating the design shown in this image: However, I have encountered an issue that has been persisting for some time: I'm struggling to understand why this issue is occurring. An interesting observation i ...

htmlcsstwitter-bootstrapz-index