<div class="facebook">
<div class="facebook_back"></div>
 <div class="eye">
    <div class="iris anim"></div>
 </div>
</div>
<div class="ia">
<div class="ia_back"></div>
<div class="ia_phones"></div>
</div>
/*
==============================================
MAIN
==============================================
*/
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(0deg, #dd0000, #2f6c7f);
}
/*
==============================================
ELEMENTS
==============================================
*/
.facebook {  
  height: 55vw;
  width:55vw;  
  position: absolute;
  margin-left: 25vw;
  bottom:0;  
}
.facebook_back {
  z-index: 1;    
  background-image: url('http://themes.opderdan.de/platformer/facebook.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  height: 100%;
  width:100%;  
}
.eye {
  z-index: 5; 
  width: 10%;
  height: 10%;
  bottom: 0;
  background-color: #ffffff;
  box-shadow: inset 0 0 40px 0 rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: absolute;
  margin-left: 18.1vw;
  margin-bottom: 14.8vw;
  -webkit-perspective: 500px;
          perspective: 500px;
  overflow: hidden;
}
.eye .iris {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.8);
          transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.8);
  background: -webkit-radial-gradient(center ellipse, #000000 13%, #cedbe9 15%, #cedbe9 15%, #b1d1e0 25%, #85b5e5 44%, #6199c7 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, rgba(0, 0, 0, 0) 71%);
  background: radial-gradient(ellipse at center, #000000 13%, #cedbe9 15%, #cedbe9 15%, #b1d1e0 25%, #85b5e5 44%, #6199c7 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, rgba(0, 0, 0, 0) 71%);
  border-radius: 100%;
}
.eye .iris.anim {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: iris;
          animation-name: iris;
}

@-webkit-keyframes iris {
  0%, 100% {
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.8);
            transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.8);
  }
  10% {
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.8);
            transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.8);
  }
  30% {
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.8);
            transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.8);
  }
  45% {
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.8);
            transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
  }
  55%, 60% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.8);
            transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.8);
  }
  90% {
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.8);
            transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.8);
  }
}
@keyframes iris {
  0%, 100% {
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.8);
            transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.8);
  }
  10% {
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.8);
            transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.8);
  }
  30% {
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.8);
            transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.8);
  }
  45% {
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.8);
            transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.8);
  }
  55%, 60% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.8);
            transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.8);
  }
  90% {
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.8);
            transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.8);
  }
}
.ia {  
  height: 30vw;
  width:30vw;  
  position: absolute;
  margin-left: 50vw;
  bottom:0;  
}
.ia_back {
  z-index: 2;    
  background-image: url('http://themes.opderdan.de/platformer/instantarticles.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  height: 100%;
  width:100%;  
}
.ia_phones {
  z-index: 3;    
  background-image: url('http://themes.opderdan.de/platformer/instantarticles_phones.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: left top;      
  position: absolute;
  height: 75%;
  width:75%;  
  left: 0;
  top:8%;
  margin-left:21vw;
    
  -webkit-animation:phonemove 3.6s ease infinite;
  -moz-animation:phonemove 3.6s ease infinite;
  animation:phonemove 3.6s ease infinite;  
  
 transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%; 
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes phonemove {
	0% {
		transform: rotate(-10deg);
	}
	50%{
		transform: rotate(10deg);
	}		
	100%{
		transform: rotate(-10deg);
	}	
}
@-webkit-keyframes phonemove {
	0% {
		-webkit-transform: rotate(-10deg);
	}
	50%{
		-webkit-transform: rotate(10deg);
	}		
	100%{
		-webkit-transform: rotate(-10deg);
	}		
}

Rerun