<div class="thing"></div>

<div class="thing animated slow"></div>

<div class="thing animated"></div>

<p>If you have <em>no</em> transition here, then it would be a classic "sprite" animation like is used in 8-bit video games.</p>

.thing {
	width: 100px;
	height: 100px;
	background: red;
	background-image: url("https://assets.codepen.io/4806767/sprite-example.png");
	background-position: 0 0;
	background-size: 200px; /* 400px */
	outline: 1px solid red;
}

.thing:hover {
	background-position: 100px 0;
}


@keyframes framestyle {
	50% {
		background-position: -100px 0px;
	}
}

.animated {
	transition: 0s;
	animation: framestyle 5s steps(1) infinite;
}

.slow {
	animation-timing-function: steps(4);
}
































body {
	display: grid;
	gap: 2rem;
	padding: 2rem;
}

/* https://assets.codepen.io/4806767/sprite-example.png */