<style>

@-webkit-keyframes lr {
0%   { margin-left: 0px; }
25%  { margin-left: 200px; }
50%  {	margin-left: -110px;}
100% { margin-left: 0px; }
}

@-moz-keyframes lr {
0%   { margin-left: 0px; }
25%  { margin-left: 10px; }
50%  {	margin-left: -10px;	}
100% { margin-left: 0px; }
}

@-o-keyframes lr {
0%   { margin-left: 0px; }
25%  { margin-left: 10px; }
50%  {	margin-left: -10px;	}
100% { margin-left: 0px; }
}

@keyframes lr {
0%   { left: 0px; }
25%  { left: -10px;}
50%  {	left: 100px;}
100% { left: 0px; }
}

@-webkit-keyframes lr1 {
0%   { margin-left: 0px; opacity: 1;}
25%  { margin-left: 180px; opacity: .6; }
50%  {	margin-left: 30px; opacity: .1;}
100% { margin-left: 0px; opacity: .7; }
}

@-moz-keyframes lr1 {
0%   { margin-left: 0px; opacity: 1;}
25%  { margin-left: 180px; opacity: .6; }
50%  {	margin-left: 30px; opacity: .1;}
100% { margin-left: 0px; opacity: .7; }
}

@-o-keyframes lr1 {
0%   { margin-left: 0px; opacity: 1;}
25%  { margin-left: 180px; opacity: .6; }
50%  {	margin-left: 30px; opacity: .1;}
100% { margin-left: 0px; opacity: .7; }
}

@keyframes lr1 {
0%   { margin-left: 0px; opacity: 1;}
25%  { margin-left: 180px; opacity: .6; }
50%  {	margin-left: 30px; opacity: .1;}
100% { margin-left: 0px; opacity: .7; }
}

@-webkit-keyframes lr2 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 250px; opacity: .3; }
50%  {	margin-right: 350px; opacity: .5;}
100% { margin-right: 0px; opacity: .7; }
}

@-moz-keyframes lr2 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 250px; opacity: .3; }
50%  {	margin-right: 350px; opacity: .5;}
100% { margin-right: 0px; opacity: .7; }
}

@-o-keyframes lr2 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 250px; opacity: .3; }
50%  {	margin-right: 350px; opacity: .5;}
100% { margin-right: 0px; opacity: .7; }
}

@keyframes lr2 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 250px; opacity: .3; }
50%  {	margin-right: 350px; opacity: .5;}
100% { margin-right: 0px; opacity: .7; }
}

@-webkit-keyframes lr3 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 250px; opacity: .3; }
50%  {	margin-right: 350px; opacity: .5;}
100% { margin-right: 0px; opacity: .7; }
}

@-moz-keyframes lr3 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 250px; opacity: .3; }
50%  {	margin-right: 350px; opacity: .5;}
100% { margin-right: 0px; opacity: .7; }
}

@-o-keyframes lr3 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 250px; opacity: .3; }
50%  {	margin-right: 350px; opacity: .5;}
100% { margin-right: 0px; opacity: .7; }
}

@keyframes lr3 {
0%   { margin-right: 0px; opacity: 1;}
25%  { margin-right: 350px; opacity: .5; }
50%  {	margin-right: 300px; opacity: .5;}
100% { margin-right: 0px; opacity: .1; }
}

body {
background-color: #ccc;
}

#a {
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-image: url('http://i.picpar.com/FSvc.gif');
background-size: cover;
background-repeat: no-repeat;
}

#b{
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-image: url('http://i.picpar.com/NSvc.gif');
background-size: cover;
background-repeat: no-repeat;
opacity: .5;
}

#c {
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #000;
opacity: .7;
overflow: hidden;
z-index: 1;
}

#one {
position: fixed;
margin: auto;
bottom: 0px;
left: 0px;
right: 0px;
height: 361px;
width: 400px;
overflow: hidden;
z-index: 100;
opacity: .7;
-webkit-animation: lr .5s infinite;
-moz-animation: lr .5s infinite;
-o-animation: lr .5s infinite;
animation: lr .5s infinite;
}

#two {
position: fixed;
margin: auto;
bottom: 0px;
left: 150px;
right: 0px;
height: 361px;
width: 400px;
overflow: hidden;
z-index: 100;
opacity: .7;
-webkit-animation: lr1 .5s infinite;
-moz-animation: lr1 .5s infinite;
-o-animation: lr1 .5s infinite;
animation: lr1 .5s infinite;
}

#three {
position: fixed;
margin: auto;
bottom: 0px;
left: 150px;
right: 0px;
height: 361px;
width: 400px;
overflow: hidden;
z-index: 100;
opacity: .7;
-webkit-animation: lr2 .8s infinite;
-moz-animation: lr2 .8s infinite;
-o-animation: lr2 .8s infinite;
animation: lr2 .8s infinite;
}

#four {
position: fixed;
margin: auto;
bottom: 0px;
left: 150px;
right: 0px;
height: 361px;
width: 400px;
overflow: hidden;
z-index: 100;
opacity: .7;
-webkit-animation: lr3 .8s infinite;
-moz-animation: lr3 .7s infinite;
-o-animation: lr3 .7s infinite;
animation: lr3 .7s infinite;
}


</style>

<div id="a">
</div>
<div id="c">
</div>
<div id="b">

<div id="one">
<img src="http://i.picpar.com/jTvc.png">
</div>

<div id="two">
<img src="http://i.picpar.com/jTvc.png">
</div>

<div id="three">
<img src="http://i.picpar.com/jTvc.png">
</div>

<div id="four">
<img src="http://i.picpar.com/jTvc.png">
</div>