JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
</div>

CSS

@-webkit-keyframes shadow {
	0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
	50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
	100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@-moz-keyframes shadow {
	0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
	50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
	100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@keyframes shadow {
	0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
	50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
	100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}

.one {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: red;
    box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.one:hover {
	-webkit-animation: shadow 1s ease-in-out infinite;
	-moz-animation: shadow 1s ease-in-out infinite;
	animation: shadow 1s ease-in-out infinite;
}