Select Page

Sprite sheet animation using CSS only

Using CSS steps() it is easy to control the number of keyframes rendered in an animation’s duration. It breaks up the sprite sheet into equal parts called steps based on the value we set.

Let’s use steps() to create a simple sprite sheet animation.

HTML:

<div id="sprite-container">
  <div id="sprite-image">
  </div>
</div>

CSS:

#sprite-image {
  height: 325px;
  width: 184px;
  background: url("https://webisora.com/wp-content/uploads/2018/07/capguy-walk-1472.png")
    0px 0px;
  animation: play 0.8s steps(8) infinite;
}
@keyframes play {
  100% {
    background-position: -1472px;
  }
}

Since the sprite sheet contains 8 image sprites, the number of steps will be 8. We are animating the background position of the sprite sheet. The sprite sheet’s total width is 1472px and animated right-to-left.

Demo:

See the Pen Sprite Animation using CSS only by Sagar Shrestha (@webisora) on CodePen.

If you want to use Javascript instead of CSS animation, check the previous article Animate sprite sheet using Javascript.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *