带spritesheet的{css}

Question

尝试关注博客文章treehouse tutorial并编写了一切，就像教程所说，但我的动画无法启动或工作。我的小图片显示很好，它是一个490 x 110的精灵表。我正在使用的代码如下：

.ken {
  width: 70px;
  height: 110px;
  background: url('/imgs/ken-shoryuken.png') left center;
  animation: play 1.5s steps(7) infinite;
}
@keyframes play {
   100% { background-position:-490; }
}

它的定位是一个简单的潜水，它表现得很好，它的动画不会出于某种原因，任何想法？

Answer 1

您需要specify an absolute length unit, keyword or percentage for background-position：

@keyframes play {
   100% { background-position:-490px; }
}

  

[背景位置]语法

     

  
• background-position：top;
  
• background-position：bottom;
  
• background-position：left;
  
• background-position：right;
  
• background-position：center;
  
• background-position：25％75％;
  
• background-position：0px 0px，center;