Question

我第一次使用Sprite表，我相信我已经正确输入了代码。但是，没有任何运动。谁能帮我吗？

我看了几本教程，看不出它们之间的区别。

.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的值而不是动画名称。

如果您给动画命名不是保留字的任何其他内容，它将运行。

为什么我的Sprite表在CSS中根本不移动？

2 个答案: