<div class="youtube youfloat">
<div class="youtube_back"></div>
 <div class="youtube_blink"></div>
 <div class="youtube_hg tossing"></div>
</div>
/*
==============================================
MAIN
==============================================
*/
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(0deg, #dd0000, #2f6c7f);
}
/*
==============================================
ELEMENTS
==============================================
*/
.youtube {  
  height: 50vw;
  width:50vw;  
  position: absolute;
  margin-left: 25vw;
  margin-bottom: 25vh;
  bottom:0;  
}
.youtube_back {
  z-index: 1;    
  background-image: url('http://themes.opderdan.de/platformer/youtube_back.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  height: 100%;
  width:100%;  
}
.youtube_blink {
  z-index: 2;    
  background-image: url('http://themes.opderdan.de/platformer/youtube_blink.gif');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: auto;
  margin-left:15.6vw;
  margin-top:8.7vw;
  position: absolute;
  height: 38%;
  width:38%;  
}
.youtube_hg {
  z-index: 2;    
  background-image: url('http://themes.opderdan.de/platformer/youtube_hg.png');
  background-size: contain;    
  background-repeat: no-repeat;
  background-position: auto;
  margin-left:9.8vw;
  margin-top:28.5vw;
  position: absolute;
  height: 10%;
  width:10%;  
}
/*
==============================================
ANIMATIONS
==============================================
*/
.youfloat{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 3.5s;	
	-webkit-animation-duration: 3.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%);
	}			
}
.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	

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

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

@keyframes tossing {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}
Rerun