csscss-animationslinear-gradientsbackground-size

Animating text shimmer background position dynamically


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?


Solution

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