<div class="batman">
            <div class="bat-cave">
            <div class="left-wing-connector">
                <div></div> <!-- 1 --> 
                <div></div> <!-- 2 --> 
                <div></div> <!-- 3 --> 
            </div>
            <div class="left-wing">
                <div></div> <!-- 1 --> 
                <div></div> <!-- 2 --> 
                <div></div> <!-- 3 -->
                <div class="left-smoother">
                </div>
            </div>
            <div class="bat-body">
                <div></div> <!-- 1 --> 
                <div></div> <!-- 2 --> 
                <div></div> <!-- 3 --> 
                <div></div> <!-- 4 --> 
                <div></div> <!-- 5 --> 
            </div>
            <div class="right-wing-connector">
                <div></div> <!-- 1 --> 
                <div></div> <!-- 2 --> 
                <div></div> <!-- 3 --> 
            </div>
            <div class="right-wing">
                <div></div> <!-- 1 --> 
                <div></div> <!-- 2 --> 
                <div></div> <!-- 3 -->
                <div class="right-smoother">                
                </div>
            </div>
            </div>
            </div>

/* Animation only works in a webkit browser*/

h1,
h2 {
  font-family: 'Lato', sans-serif;
  text-align: center;
  text-transform: uppercase;
}
span {
  text-transform: lowercase;
  color: orangeRed;
}
.batman {
  top: -24px;
  background:white;
  width: 760px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 0;
}
.bat-cave {
  position: relative;
  top: 210px;
}
.bat-body {
  background: black;
  width: 52px;
  left: 350px;
  height: 244px;
  margin: 0 auto;
  margin-top: 9px;
  position: absolute;
  z-index: 9999;
  animation: body-move 1.1s infinite;
  transform-origin: center center;
  transform-origin: left top;
}
.bat-body > div:nth-child(1) {
  background: white;
  width: 30px;
  height: 35px;
  position: absolute;
  top: 0;
  left: 7px;
  transform: skewX(15deg);
}
.bat-body > div:nth-child(2) {
  background: white;
  width: 30px;
  height: 35px;
  position: absolute;
  top:0;
  right: 6px;
  transform: skewX(-15deg);
}
.bat-body > div:nth-child(3) {
  background: black;
  width: 50px;
  height: 16px;
  position: relative;
  margin: 0 auto;
  top: 25px;
  border-radius: 50%;
}
.bat-body > div:nth-child(4) {
  background: white;
  width: 384px;
  height: 205px;
  position: relative;
  top: 122px;
  left: -357px;
  border-radius: 100%;
}
.bat-body > div:nth-child(5) {
  background: white;
  width: 384px;
  height: 205px;
  position: relative;
  top: -84px;
  left: 26px;
  border-radius: 100%;
  transform-origin: left top;
}

/* Left Wing */
.left-wing { 
  animation: wing-left 1.1s infinite;
  transform-origin: right top;  
}

.left-wing,
.right-wing {
  background: black;
  width: 350px;
  height: 182px;
  position: absolute;

}

.left-wing > div:nth-child(1) {
  background:white;
  width: 92px;
  height: 122px;
  position: absolute;
  top: -66px;
  left: 260px;
  border-radius: 50%;
  border-bottom-right-radius: 7%;
}

.left-wing > div:nth-child(2) {
  background: white;
  width: 325px;  height: 205px;
  position: absolute;
  top: -23.3%;
  left: -47.2%;
  border-radius: 100%;
  transform-origin: left top;
  transform: rotate(12deg);
}
.left-wing > div:nth-child(3) {
  background: white;
  width: 384px;  height: 205px;
  position: relative;
  top: 138px;
  left: -16px;
  border-radius: 100%;
  transform-origin: left top;
}

/* left Smoother  */
.left-smoother {
  background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 49%, transparent 51%, transparent 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(49%,rgba(0, 0, 0, 1)), color-stop(51%,transparent), color-stop(100%,transparent));
  background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
  background: -o-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
  background: -ms-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
  background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
  width: 60px;
  height: 60px;
  position: absolute;
  top: 124px;
  left: 319px;
  transform: rotate(-136deg);
}


/* left wing connector */

.left-wing-connector {
  background: black;
  width: 118px;
  height: 147px;
  position: absolute;
  top: 44px;
  left: 232px;
  padding-top: 11px;
  overflow: hidden;
}


.left-wing-connector > div:nth-child(1) {
  background: black;
  width: 35px;
  height: 20px;
  position: relative;
  top: -5px;
  left: 83px;
}

.left-wing-connector > div:nth-child(2) {
  background: white;
  width: 50px;
  height: 40px;
  position: relative;
  top: -59px;
  left: 72px;
  border-bottom-left-radius: 89%;
}

.left-wing-connector > div:nth-child(3) {
  background: white;
  width: 325px;
  height: 205px;
  position: relative;
  top: 36px;
  left: -180px;
  border-radius: 100%;
}

/* Right Wing */
.right-wing {
  left: 402px;    
  animation: wing-right 1.1s infinite;
  transform-origin: left top;
}

.right-wing > div:nth-child(1) {
  background:white;  
  width: 92px;  
  height: 122px;  
  position: absolute;  
  top: -66px;  
  left: -2px;  
  border-radius: 50%;  
  border-bottom-left-radius: 7%;
}
.right-wing > div:nth-child(2) {
  background: white;  
  width: 325px;
  height: 205px;  
  position: absolute;  
  top: 13.7%;  
  left: 56.3%;  
  border-radius: 100%;  
  transform-origin: left top;
  transform: rotate(-12deg);
}
.right-wing > div:nth-child(3) {
  background: white;  
  width: 384px;  
  height: 205px;  
  position: absolute;  
  top: 139px;  
  left: -19px;  
  border-radius: 100%;  
}

/* Left wing keyframes*/
@keyframes wing-right{
  0%{transform:rotate(0deg); transform-origin:left top;}
  50%{transform:rotate(-40deg); transform-origin:left top;}
  100%{transform:rotate(0deg); transform-origin:left top;}
}

/* Right Wing Key Frames  */
@keyframes wing-left{
  0%{transform:rotate(0deg); transform-origin:right top;}
  50%{transform:rotate(40deg); transform-origin:right top;}
  100%{transform:rotate(0deg); transform-origin:right top;}
}

/* Body Keyframes*/


@keyframes body-move {
  0%{top: 0;transform-origin:center center;}
  50%{top: -10px; transform-origin:center center;}
  100%{top: 0;transform-origin:center center;}
}

/* Right Smoother  */
.right-smoother {
  background: -moz-linear-gradient(45deg, transparent 0%, transparent 51%, rgba(0, 0, 0, 1) 54%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,transparent), color-stop(51%,transparent), color-stop(54%,rgba(0, 0, 0, 1)), color-stop(100%,rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
  background: -ms-linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
  width: 60px;
  height: 60px;
  position: absolute;
  top: 125px;
  left: -28px;
  transform: rotate(-215deg);   
}


/* Right wing connector */

.right-wing-connector {
  background: black;
  width: 118px;
  height: 147px;
  position: absolute;
  top: 44px;
  left: 402px;
  padding-top: 11px;
}


.right-wing-connector > div:nth-child(1) {
  background: black;
  width: 35px;
  height: 20px;
  position: relative;
  top: -5px;
  left: 0;
}

.right-wing-connector > div:nth-child(2) {
  background: white;
  width: 50px;
  height: 40px;
  position: relative;
  top: -59px;
  left: -3px;
  border-bottom-right-radius: 89%;
}

.right-wing-connector > div:nth-child(3) {
  background: white;
  width: 384px;
  height: 205px;
  position: relative;
  top: 32px;
  left: -26px;
  border-radius: 100%;
}