title: CSS loop an animation
body: <p>I'm trying to learn HTML and CSS but I have encountered a problem:</p>
  
  <pre><code>&lt;style style="text/css"&gt;
      div.slide-slow {
          width: 100%;
          overflow: hidden;
      }
  
      div.slide-slow div.inner {
          animation: slide-slow 30s;
          margin-top: 0%;
      }
  
      @keyframes slide-slow {
          from {
              margin-left: 100%;
          }
  
          to {
              margin-left: 0%;
          }
      }
  &lt;/style&gt;
  
  &lt;div class="slide-slow"&gt;
      &lt;div class="inner"&gt;
          &lt;img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want this CSS to loop and not just stop when it is done. Is it possible to make a CSS function to loop?</p>