Dribble Bouncing logo

by Pranab Dey

HTML

<div class="main">
	<div class="ball">
		<div class="circle1"></div>
	</div>
	<div class="shadow"></div>
</div>

CSS

.main{
	position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);
}

.ball{
	border: 12px solid #c42562; background: #ea4c89; width:120px; height: 120px; border-radius: 50%;
	transition: 0.2s ease-out; position: relative; overflow: hidden; transform: scale(0.8);
	animation: bounce 0.8s ease-out infinite; z-index: 2;
}

.circle1{
	border: 12px solid #c42562; background: transparent; width:150px; height: 300px; border-radius: 50%;
	transition: 0.2s ease-out; position: absolute; left:-75%; top: -30%;
}

.circle1:before, .circle1:after{
	content:''; border: 12px solid #c42562; background: transparent; width:150px; height: 150px; border-radius: 50%;
	transition: 0.2s ease-out; position: absolute;
}

.circle1:after{
	left:50%; bottom: 13%; 
}

.circle1:before{
	left:25%; top: -32%; 
}
.shadow{
	background: #b7afaf; width: 100%; height: 50px; position: relative; margin: auto;
	margin-top: 50px; transform: rotateX(70deg); border-radius: 50%; animation: shad 0.8s ease-out infinite;
	z-index: 1;
}

@keyframes bounce{
	0%{
		transform: translatey(-50%) rotatez(100deg);
	}
	20%{
		transform: translatey(50%) rotatez(50deg);
	}
	100%{
		transform: translatey(-50%);
	}
}

@keyframes shad{
	0%{
		transform: scale(0.7); opacity: 0.5;
	}
	20%{
		transform: scale(1); opacity: 1;
	}
	100%{
		transform: scale(0.7); opacity: 0.5;
	}
}