<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.