Google ads logo using HTML and CSS

HTML

CSS

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
}

.google-ads {
	width: 170px;
	height: 170px;
	position: relative;
	transform: translateY(-20px);
	animation: logoSlide 3s ease-out forwards;
}
@keyframes logoSlide {
	to {
		transform: translateY(0);
	}
}
.google-ads-half {
	height: 100%;
	width: 60px;
	border-radius: 500px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: top;
}
.google-ads-half.blue {
	background: #4285f4;
	z-index: 3;
	transform: translate(-50%, -50%) scaleY(0);
	animation: a-blue-entrance ease-in-out forwards;
}
@keyframes a-blue-entrance {
	50% {
		transform: translate(-50%, -50%) scaleY(1);
	}
	100% {
		transform: translate(-75%, -50%) scaleY(1) rotate(-30deg);
	}
}
.google-ads-half.yellow {
	background: #f4b400;
	animation: ballAnimation ease-in-out forwards;
	transform: translate(-50%, -50%) scaleY(0);
}
@keyframes ballAnimation {
	50% {
		transform: translate(-50%, -50%) scaleY(1);
	}
	100% {
		transform: translate(-25%, -50%) scaleY(1) rotate(30deg);
	}
}
.google-ads-ball {
	position: absolute;
	top: 0;
	left: 50%;
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, 0);
	width: 60px;
	height: 60px;
	background: #0f9d58;
	z-index: 2;
	animation: drop-ball 1s ease-in-out forwards;
	animation-delay: 2s;
}
@keyframes drop-ball {
	0% {
		opacity: 1;
	}
	50% {
		transform: translate(-141%, 152%);
	}
	60% {
		transform: translate(-128%, 135%);
	}
	72% {
		transform: translate(-141%, 152%);
	}
	83% {
		transform: translate(-134%, 140%);
	}
	90% {
		transform: translate(-141%, 152%);
	}
	95% {
		transform: translate(-136%, 147%);
	}
	100% {
		opacity: 1;
		transform: translate(-141%, 152%);
	}
}

JS