<div class="snapchat snapfloat">
              <div class="snapchat_back"></div>
              <div class="snapchat_rotor"></div>
          </div>

/*
==============================================
MAIN
==============================================
*/
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(0deg, #dd0000, #2f6c7f);
}
/*
==============================================
ELEMENTS
==============================================
*/
.snapchat {  
  height: 55vw;
  width:55vw;  
  position: absolute;
  margin-left: 11vw;
  top:0;  
}
.snapchat_buttonbox {
  margin-top:16vw;
  margin-left: 15vw;
  top:0;  
}
.snapchat_back {
  z-index: 0;    
  background-image: url('http://themes.opderdan.de/platformer/snapchat_back.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  height: 100%;
  width:100%;  
}
.snapchat_rotor {
  z-index: 4;    
  background-image: url('http://themes.opderdan.de/platformer/snapchat_rotor.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: center;      
  position: absolute;
  height: 20%;
  width:20%;     
  margin-left: 1vw; 
  bottom:0;
  margin-bottom: 7vh; 
  -webkit-animation:rotor 3.5s linear infinite;
  -moz-animation:rotor 3.5s linear infinite;
  animation:rotor 3.5s linear infinite reverse;  
}

@-moz-keyframes rotor { 
    100% { -moz-transform: rotate(360deg); 
    } 
}
@-webkit-keyframes rotor { 
    100% { -webkit-transform: rotate(360deg); 
    } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    } 
}

.snapfloat{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(1%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}
@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(21%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}