JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>

CSS

@keyframes one {
	100% {
		background: #69c;
	}
}
@-webkit-keyframes one {
	100% {
		background: #69c;
	}
}
.test {
	width: 300px;
	height: 200px;
	border:4px solid #69c;
	background: #ffc;
	-webkit-animation: one forwards 1s paused;
	animation: one forwards 1s paused;
}
.test:hover {
	-webkit-animation-play-state: running;
	animation-play-state: running;
}