CSS Keyframes

Keyframes rule for Gecko and Webkit browsers.

HTML

<div class="frame">
    <div class="outer">
        <div class="inner">
            <img src="http://graphics8.nytimes.com/newsgraphics/2015/11/09/raqqa/796b0e39390f98a525743466f01bd5a35a2fd875/raqqa-tour-base-big-4800.jpg">
        </div>
        </div>
    </div>
</div>

CSS

body { overflow: hidden; }

.frame {
    overflow: hidden;
    width:1000px;
    height:600px;
     position:absolute;
    background: gray;
}
div.outer {
    width: 100%;
    height: 100%;
    position:absolute;
    animation: myscale 6s infinite;
    transform-origin: center;
    animation-timing-function: ease-in-out;
    transform: scale(0.2);
   
}
div.inner {
    width: 100%;
    height: 100%;
    position:absolute;
    animation: mymove 6s infinite;
    animation-timing-function: ease-in-out;
    transform-origin: center;
}
div.canvas {

    position:absolute;
    
}


@keyframes mymove {
  from { transform: translate(-1600px,-1400px);}
  to { transform: translate(-2200px,-2500px);}
}

@keyframes myscale {
  from { transform: scale(1);animation-timing-function: ease-out;}
  40% { transform: scale(0.4);animation-timing-function: ease-in-out;}
  to { transform: scale(1); }
}