JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div id="container">
    <div id="eins">
        <div></div>
    </div>
    <div id="zwei">
        <div></div>
    </div>
</div>

CSS

#container {
	width: 1269px;
	height: 294px;
	
}

#eins, #zwei {
   position:absolute;
   top:0px;
   left:0px;
}


#eins {
		    width: 1269px;
		    height:294px;
		    z-index:150;
		    -ms-transform-origin: 50% 50% 147px;
		    -moz-transform-origin: 50% 50% 147px;
		    -webkit-transform-origin: 50% 50% 147px;
  -webkit-animation: rotate 4s infinite;
  -webkit-animation-delay: -2s;
}
#zwei {
	    background:red;
		    width: 1269px;
		    height:294px;
		    z-index:70;
		    -ms-transform-origin: 50% 50% 147px;
		    -ms-transform: rotate3d(1, 0, 0, -90deg);
		    -ms-transition: 1s;
		    -ms-transition-timing-function: ease;
		    -moz-transform-origin: 50% 50% 147px;
		    -moz-transform: rotate3d(1, 0, 0, -90deg);
		    -webkit-transform-origin: 50% 50% 147px;
			
		    -webkit-animation: rotate 4s infinite;
		
}
		
#eins div, #zwei div {
	height:294px;
	
}

#eins div {
  -webkit-animation: imageseins 8s infinite;
  -webkit-animation-delay: -2s;
}
#zwei div {
  -webkit-animation: imageszwei 8s infinite;
}

@-webkit-keyframes rotate {
	0% {-webkit-transform: rotate3d(1, 0, 0, -90deg);}
   50% {-webkit-transform: rotate3d(1, 0, 0, 0deg);}
  100% {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
}


@-webkit-keyframes imageseins {
	0%, 49.99% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner1.jpg")}
	50%, 100% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner3.jpg")}
}
@-webkit-keyframes imageszwei {
	0%, 49.99% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner2.jpg")}
	50%, 100% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner4.jpg")}
}