title: Create infinite loop with css
body: <p>I have an image of waves that takes about the bottom third of the screen(not the background image) that I want to run on an infinite loop from right to the left but using css. I have tried different things but so far have been unable to make it work.</p>
  
  <p>I have defined the img src on the HTML, but if needed i can do it on the css file.</p>
  
  <p>Any help or suggestions on how to do it are appreciated.</p>
  
  <p>CSS</p>
  
  <pre><code>body {
      border: 2px solid black;
      width: 700px;
      background-image: url("./cave.jpg");
      background-size: 700px 505px;
      background-repeat: no-repeat;
      background-position: 10px 10px;
  }
  
  .waves {
      height: 380px;
      width: 700px;
      position: relative;
      top: -300px;
      background-repeat: repeat-x;
      animation: animatedImage 20s linear infinite;
  }
  
      @keyframes animatedImage {
      from {background-position: 0 0;}
      to {background-position: 100% 0;}
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Escape the Cave&lt;/title&gt;
      &lt;link rel="stylesheet" href="./jogo.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;
       &lt;img class="waves" src="./ondas.png"&gt;
  
        &lt;/div&gt;
      &lt;script src="jogo.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>