JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div class="d2" ></div>
</header>

CSS

.d2 {
	width: 100px;
	height: 100px;
	background-color: black;
	float: left;
	border-radius: 1000px;
}

header:hover .d2 {
	animation: shadow-box 5s infinite;
}

@keyframes shadow-box {
	from {
		width: 100px;
		height: 100px;
		transform: translateX(0px);
	}
	to {
		width: 250px;
		height:250px;
		transform: translateX(350px);
	}
}