<div id="cloud"></div>

/* ============================================================================================== 
Renata G Martins
http://www.renatagmartins.com.br
================================================================================================= */
body,
html {
	margin: 0;
	padding: 0;
	background: rgb(26, 188, 156);
}


@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

#cloud {
	width: 220px; 
	height: 60px;

	background: #f2f9fe;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	position: relative;
	margin: 120px auto 20px;
  
  /*animation here */
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
}

#cloud:after, #cloud:before {
	content: '';
	position: absolute;
	background: #f2f9fe;
	z-index: -1
}

#cloud:after {
	width: 80px; height: 107px;
	top: -38px; left: 32px;
	
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
}

#cloud:before {
	width: 120px; height: 141px;
	top: -60px; right: 24px;
	border-radius: 200px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.