title: Animated background overflowing from DIV
body: <p>I'm trying to create a loading like effect and I'm not sure if this is the correct approach.</p>
  
  <p>I'm trying to animate it from left to right but it's neither starting from the left nor it is ending in the right. It is overflowing out of the DIV. I tried with <code>overflow: hidden</code> and <code>left: 0</code> but that's not working either. Clearly, my approach is wrong or something's missed out. Kindly help out.</p>
  
  <p>Here's what I have so far: <a href="https://jsfiddle.net/rxs2v4k9/" rel="nofollow noreferrer">JSFIDDLE DEMO</a></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>.timeline__story {
    width: 100%;
    background-color: #f3f3f3;
    border: 1px solid #aaa;
    padding: 15px;
  }
  .timeline__blank {
    position: relative;
  }
  .timeline__blink {
    width: 100%;
    height: 100%;
    position: absolute;
    animation: joey 3s ease-in-out infinite;
    background: -moz-linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
    background: -webkit-linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
    background: linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
    background-repeat: no-repeat;
    z-index: 1;
  }
  @keyframes joey {
    0%   {left: 0; top: 0;}
    50%  {left: 50%; top: 0;}
    100% {left: 0; top: 0;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="timeline__story timeline__blank"&gt;
    &lt;div class="timeline__blink"&gt;&amp;nbsp;&lt;/div&gt;
    &lt;div&gt;
         This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. 
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>