<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 */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.