title: Responsive shine animation using linear-gradient as background
body: <p>I want to create a shine loading animation which will appear on multiple elements with different background colors.</p>
  <p>Currently, I'm using <code>background-image</code> gradient and I'm animating the <code>background-position</code> using <code>vw</code> units, but it's not scalable, my elements will have different lengths.</p>
  <p>Is there a way I can animate <code>background-image</code> with percentage units?</p>
  <p>The animation created</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: black;
  }
  
  header {
    width: 100%;
    height: 50px;
    background-color: rebeccapurple;
    background-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(255,255,255,0.3) 50%,
      transparent 100%
    );
    background-repeat: no-repeat;
    background-position: -100vw;
    animation: shine 2s infinite;
  }
  
  @keyframes shine {
    0% {
      background-position: -100vw;    
    }
    100% {
      background-position: 100vw;   
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;&lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>