Animating text shimmer background position dynamically

Question

I am using CSS keyframes to add a shimmer effect to my text. The effect is working great but I'm having a hard time determining how to make it work with any length of text since I am currently using pixel values to determine how far to animate the background-position

h2 {
  color: #F5C21B;
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Open Sans', sans-serif;
  font-weight:800;
  font-size:80px;
  text-transform:uppercase;
  position:relative;
}

h2:before {
  background-position: -180px;
    -webkit-animation: flare 5s infinite;
  -webkit-animation-timing-function: linear;
  background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content:attr(data-title);
  color: #FFF;
  display: block;
  padding-right: 140px;
  position: absolute;
}

/* Animations */
@-webkit-keyframes flare {
    0%   { background-position: -180px; }
    30%  { background-position: 400px; }
    100% { background-position: 400px; }
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">

<h2 data-title="Lorem">Lorem</h2>
<h2 data-title="Ipsum">Ipsum</h2>
<h2 data-title="Lorem Ipsum">Lorem Ipsum</h2>
<h2 data-title="Lorem Ipsum Dolor">Lorem Ipsum Dolor</h2>

I would like for the "flare" animation to start to the left of the text out of view and end to the right of the text out of view. I tried using percentages for the background-position animation, but then the animation wouldn't work. Is there any way to modify this so that the flare animation works for any length/font-size of text?

Answer 1

I would first consider one text layer and update the code like below. I have a detailed answer that explain the relation between background-size and background-position

h2 {
  background: 
   /* gradient for the shimmer */
    linear-gradient(65deg, 
      #0000 calc(50% - 50px), #fff5 0, 
      #fffb calc(50% + 50px), #0000 0),
    /* gradient for the text */
    linear-gradient(45deg, red, blue);
  /* the sise of the first gradient is bigger than 100% */
  background-size: calc(200% + 100px) 100%,100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flare 3s infinite linear;
  
  font-family: sans-serif;
  font-weight:800;
  font-size:80px;
  text-transform:uppercase;
  margin: 0;
  width: fit-content:
}

/* you animate from right to left */
@keyframes flare {
    0%   { background-position: right; }
    30%,100%  { background-position: left; }
}

<h2>Lorem</h2>
<h2>Ipsum</h2>
<h2>Lorem Ipsum</h2>
<h2>Lorem Ipsum Dolor</h2>