<div class="element"></div>
<div class="element2"></div>
.element { 
	width: 50px;height: 50px;background: #000;
	margin: 40px auto;
	animation: fadeIn 2s, float 1.2s 2s ease-in infinite both; 
}
@keyframes fadeIn { 
	from { opacity:0; } 
	to{ opacity: 1}
}
@keyframes float {
	25%{ transform: translateY(10px)} 
	50%{ transform: translateY(0px)} 
	75%{ transform: translateY(-10px)}
}


.element2 { 
	width: 50px;height: 50px;background: #000;
	margin: 40px auto;
	animation: left-in 2s, zoomIn 1.2s 2s ease-in infinite both; 
}
@keyframes left-in { 
	from { transform: translateX(0) } 
	to{ transform: translateX(40px) }
}
@keyframes zoomIn {
	from { transform: scale(.8) } 
	to{ transform: scale(1.2) }
}
Rerun