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 tutorials and can't see a difference between what they have and what I have.

.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: normal .8s steps(10) infinite;
       -moz-animation: normal .8s steps(10) infinite;
        -ms-animation: normal .8s steps(10) infinite;
         -o-animation: normal .8s steps(10) infinite;
            animation: normal .8s steps(10) infinite;
}
   @-webkit-keyframes normal{
    from{background-position:0px;}
to{background-position:-3270px;}
}
  }

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

<div class="normal"></div>

I'm expecting movement but I just get the static first sprite.

回答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.

回答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 .8s steps(10) infinite;
  -moz-animation: foo .8s steps(10) infinite;
  -ms-animation: foo .8s steps(10) infinite;
  -o-animation: foo .8s steps(10) infinite;
  animation: foo .8s steps(10) infinite;
}

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


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

}

<div class="normal"></div>