<div class="container">
  <div class="inner"></div>
</div>
BODY {
  background: #222;  
  }

DIV {
  position: relative;
  height: 200px;
  width: 300px; 
  }
.container {
  margin: 5rem auto;
  background: coral;
  background: teal url(http://img-fotki.yandex.ru/get/4401/yoksel.5a/0_44a7c_92503d09_M.jpg) center;
  border: 10px solid #FFF;
  border-radius: 30px;
  box-shadow: 0 0 10px black;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-name: appear;
  transform: matrix(1,0,0,1,0,0);
  }

@keyframes appear {
  50%{
    transform: matrix(-.01,0,0,-.01,0,-125);
    box-shadow: 0 0 1px #EEE;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.