时间戳

首页 > 解决方案 > 为什么我的精灵表在 css 中根本不动？

javascript - 为什么我的精灵表在 css 中根本不动？

问题描述

我第一次使用精灵表，我相信我已经正确输入了代码。然而，一点动静都没有。谁能帮我？

我查看了几个教程，看不出他们所拥有的和我所拥有的之间的区别。

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

我期待运动，但我只是得到静态的第一个精灵。

标签： javascriptanimation

解决方案

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

如果您将动画命名为任何其他非保留字，它将运行。

推荐阅读