title: Fish Animation on barlasapaydin.com
body: <p>hi there i am trying yo create fish animation which is on barlasapaydin.com that site but didn't get success creating that animation help me creating that animation and please provide code for that and i tried through html5 and css3 but no sccess</p>
  
  <blockquote>
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="header"&gt;
    &lt;div class="loop"&gt;
  
    &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;a href="#" class="logo"&gt;
    &lt;img src="logotype.png"/&gt;
    &lt;span class="img-anim"&gt;&lt;/span&gt;
    &lt;span class="img-anim1"&gt;&lt;/span&gt;
    &lt;span class="img-anim2"&gt;&lt;/span&gt;
    &lt;span class="img-anim3"&gt;&lt;/span&gt;
    &lt;span class="img-anim4"&gt;&lt;/span&gt;
  
    &lt;/a&gt;
  
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        $("#header .loop").animate({background-position: '-2877px 0px';});
  
  
  
  });
  &lt;/script&gt;
  </code></pre>
  </blockquote>
  
  <pre><code>#header .loop{ border: 1px solid black; background: url(loop.png); width: 411px; height: 613px; position: absolute; left: 400px;
   background-position: 0px 0px;
   -moz-animation: loop ease-out 3000ms infinite; }
   @-moz-keyframes loop{ 0%{background: url(loop.png);
   background-position: 0px 0px;} 1%{background: url(loop.png);
   background-position: -411px 0;}
  </code></pre>
  
  <p>thank you</p>