为什么我的Sprite表在CSS中根本不移动？ [英] Why is my sprite sheet not moving at all in css?

问题描述

我第一次使用Sprite工作表，并且我相信自己输入的代码正确无误。但是，没有任何运动。有人可以帮我吗？

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.

推荐答案

normal 是 animation-direction 属性的可能值。通过命名动画 normal 并在速记 animation 属性中使用动画，浏览器将CSS解释为为动画方向，而不是动画的名称。

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.

这篇关于为什么我的Sprite表在CSS中根本不移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！