Почему мой лист спрайта вообще не перемещается в css?

Question

Я впервые использую спрайт-лист и считаю, что правильно ввел код.Тем не менее, нет никакого движения вообще.Кто-нибудь может мне помочь?

Я просмотрел несколько уроков и не вижу разницы между тем, что у них есть, и тем, что у меня есть.

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

Я ожидаю движения, но у меня только первый статический спрайт.

Answer 1

Кажется, что normal это просто плохо выбранное имя для анимации:

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

Answer 2

normal является возможным значением свойства animation-direction. Называя вашу анимацию normal и используя ее в свойстве animation, браузер интерпретирует ваш CSS как значение animation-direction, а не имя вашей анимации.

Если вы назовете свою анимацию чем-то еще, кроме зарезервированного слова, она запустится.