JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<div id="grow"></div>

CSS

html,body {
  background: #20262D;
}

#grow {
  position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(0,0,0,.2);
	border-radius: 100%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.grow {
  animation: bloom ease-in-out .75s forwards;
}

.grow:before {
	animation: circle .75s;
}

@keyframes bloom {
	0% {
		filter: grayscale(.8);
	}
	40% {
		filter: grayscale(.5);
	}
	100% {
		filter: grayscale(0);
	}
}