title: Pure CSS image pan
body: <p>Can an image be scaled and moved within a wrapper in a  random direction infinite?
  How can it be achieved using css keyframes or animation</p>
  
  <p>Link to fiddle <a href="http://jsfiddle.net/Bl_praveen2004/ke9okv2g/" rel="nofollow">here</a></p>
  
  <p>I don't know how to do this. I have seen long back a jQuery slideshow plugin which moves the image within a wrapper. I could not find it to</p>
  
  <pre><code>&lt;div class="image_wrap"&gt;
  &lt;img src="/images/img_1.jpg" alt="" /&gt;
   &lt;/div&gt;
  
  .image_wrap {
     width:580px;
     height:260px;
     overflow:hidden;
  }
  .image_wrap img {
    width:100%;
    height:100%;
    transform:scale(1.2);
    animation: 1.2s ease 0s normal none infinite running jump;
  }
  </code></pre>
  
  <p>The image should bounce back and forth within a wrapper it should not slide</p>