Why Is My Sprite Sheet Not Moving At All In Css?

I'm using a sprite sheet for the first time and I believe I've entered the code correctly. However, there's no movement whatsoever. Can anyone help me? I've looked up several tutor

Solution 1:

normal is a possible value of the animation-direction property. By naming your animation normal and using it in the shorthand animation property, the browser interprets your CSS as providing a value for animation-direction and not the name of your animation.

If you name your animation anything else that's not a reserved word, it will run.

Solution 2:

It seems that normal ist just a poorly chosen name for the animation:

.normal {
  width: 327px;
  height: 445px;
  background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561677299/virtual%20pet/Sheet.png");
  display: block;
  top: 100px;
  left: 300px;
  position: relative;
  transform: scale(0.5);
  -webkit-animation: foo .8ssteps(10) infinite;
  -moz-animation: foo .8ssteps(10) infinite;
  -ms-animation: foo .8ssteps(10) infinite;
  -o-animation: foo .8ssteps(10) infinite;
  animation: foo .8ssteps(10) infinite;
}

@-webkit-keyframes foo {
  from {
    background-position: 0px;
  }
  to {
    background-position: -3270px;
  }
}


}
@keyframes foo {
  from {
    background-position: 0px;
  }
  
  to {
    background-position: -3270px;
  }
}

}

<divclass="normal"></div>