body {

  font-family: Raleway;

  display: flex;

  align-items: center;

  flex-direction: column;

  color: #000;

}

​

.page-title {

  margin-top: 30px;

}

​

.box {

  width: 256px;

  height: 256px;

  background: url('https://github.com/iamalperen/playground/blob/main/SpriteSheetAnimation/sprite.png?raw=true');

  margin-top: 30px;

  cursor: pointer;

}

.box1 {

  animation: sprite 0.6s steps(6, end) infinite;

}

.box2 {

  animation: sprite .2s steps(6, start) infinite;

}

​

@keyframes sprite {

  0% { 

    background-position: 0px 0px;

  }

  100% { 

    background-position: -1536px 0px;

  }

}

​

​

​