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

the mobile website is not properly aligned on a horizontal axis

As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...

javascripthtmlcssmobileweb

Having trouble choosing elements with angular.element within ng-repeat loop

In my HTML code, I am using an ngRepeat element: <ol id="animationFrame"> <li ng-repeat="animationImage in animationImages" ng-repeat-listener> <img ng-src="{{animationImage.src}}" id="{{animationImage.id}}"> </li> </ol& ...

javascriptjqueryhtmlangularjs

What strategies can I implement to stop Iframes from disrupting the browser's history when interacting with them?

In my particular situation, I utilize Iframes to display Grafana on my page, which showcases beautiful and user-friendly graphs. After examining, I noticed that interactions like zooming in or out on the graph using mouse clicks trigger a type of refresh ...

javascripthtmlangulargrafana

What is the correct method of implementing the "OnChange" event to a WooCommerce select element?

My task is to include the onchange="myFunction()" in the select menu below. However, because the select menu is part of woocommerce, I want to ensure that the onchange="myFunction()" remains intact even after updating my theme. How can I achieve this goal ...

javascripthtmlwordpresswoocommercewordpress-theming

Execute a jQuery function every time the class of the parent container div changes

I am seeking to trigger the function below whenever its containing div parent <div class="section">...</div> transitions to an "active" state, for example: <div class="section active">...</div> $(".skills-grid__col").each(function ...

javascriptjqueryhtmlcss

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

htmlcssapixhtmlnavigation

Working with the collapse event in Bootstrap

After purchasing a template from ThemeForest, I found it to be absolutely amazing. However, I am struggling with using Bootstrap as it seems quite complex. The left menu is structured with collapsible ul and multiple li elements. I am seeking assistance o ...

javascriptjqueryhtmlcss

Arrange the items in the Navbar

Can someone please help me with a glitch I'm experiencing that is causing my Navbar items to not align properly? (See Navbar preview) I have attempted to fix it by adjusting the margin and padding manually, but my lack of Bootstrap knowledge has hin ...

htmlcssdjangobootstrap-4navbar

Creating a Form with Table-like Alignment Using Div Tags

Take a look at my code: <div> <label>First Name</label><input type="text" id='first_name'/><br /> <label>Last Name</label><input type="text" id='last_name'/><br /> <l ...

htmlcsscss-tables

Troubleshooting: Difficulty with svg mask function when implementing an svg image in a react.js environment

I'm attempting to achieve an effect where an image appears above a background image when hovering over it, similar to this example... https://jsfiddle.net/12zqhqod/7/ <img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB ...

jquerycsssvgreactjsmask

Struggling to get the knockout js remove function to function properly within a nested table structure

I've been encountering issues while trying to eliminate the formulation elements with the 'Delete comp' link. I can't seem to figure out why it's not functioning as expected. Moreover, the 'Add another composition' link o ...

javascripthtmlknockout.js

displaying and concealing elements with jquery

Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...

javascriptjquerycss

Tips on optimizing a setTimeout script for seamless integration with an HTML form

Here is the script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function addToCart() { document.getElementById("msgs-box").innerHTML = "Item added to cart s ...

javascriptjqueryhtmlajaxforms

Dynamic Material UI TextField underline width using JSX in React

I recently encountered an issue while trying to add padding to my TextField component. I applied the padding to the root 'style' property, but it caused the underline to overflow beyond the designated area to the right by the same amount as the p ...

cssreactjsmaterial-uijsx

Is it possible to target the initial sibling of a parent element using a CSS selector?

Is there a way to target the <p> element using only the id "Standort" as a constant? Any suggestions on how to accomplish this? <section> <header> <h2 class="licht"><span id="Standort" class="-sitemap-select-item-select ...

csscss-selectors

Is it acceptable to utilize the "sticky-top" class in a mobile-friendly navigation bar?

I'm facing an issue with implementing the Sticky-top function on a navbar within a Django project. The navbar is responsive and can be expanded by clicking a button, but I want it to remain fixed at the top when the user scrolls down. Currently, I am ...

cssbootstrap-4

What is the procedure for making the menu background color transparent?

I need help changing the background color to transparent on my menu in desktop view. ul.dropdown-menu li { background-color: transparent !important; } <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul id="menu" class="menu"> ...

htmlcsswordpress

Make sure to deselect all other radio buttons when selecting one, running into difficulties

Having an issue with my UI when selecting radio buttons by clicking on a div: A loop that displays different radio buttons: {% for product in collections.regalos.products %} <li class="grid__item large--one-third gift-card"> <div class="gift-s ...

javascriptjqueryhtmlshopify

Rotating SVG images with ease at any center point

I attempted to remove the unsupported animateTransform element: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.2s" repeatCount="indefinite" /> and replaced it with CS ...

htmlcsssvg

When zoomed in, the div background gives off a crisp white appearance

When I zoom in on a div with a background color or border, it appears completely white. Strangely, this issue doesn't happen when I zoom in on the Facebook site. This picture illustrates the problem more clearly. What could be causing this issue? H ...

htmlcssbackground