JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div ontouchstart="">Hover over me and watch me spin!</div>

CSS

/**
 * Animation on hover (right way)
 */

div {
	width: 9em;
	padding: .6em 1em;
	margin: 2em auto;
	background: yellowgreen;
	animation: spin 1s linear infinite;
    animation-play-state: running;
}

@keyframes spin {
	to {
		transform: rotate(4turn);
	}
}

div:hover {
	animation-play-state: paused;
}