<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>
<img src="https://assets.codepen.io/4806767/sprite-example.png" alt="">
.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);
}
img {
display: block;
border: 1px dashed rgb(0 0 0 / .5);
}
body {
display: grid;
gap: 2rem;
padding: 2rem;
}
/* https://assets.codepen.io/4806767/sprite-example.png */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.