如何从条带创建阶梯动画？

Question

通过仅使用css关键帧，我使用条带（单个图像中的一组图像块）来动画元素背景。但它并没有正常工作，因为我不希望转换是线性的，而是分步进行：

http://jsbin.com/muyeguba/4/

我尝试了＆＃34; step-end＆＃34;这或多或少表明了我想要实现的目标。我目前正在阅读文档（http://www.w3.org/TR/css3-transitions/），这似乎可以通过自己创建计时功能来实现吗？

有可能吗？或者JS解决方案会更好吗？

Answer 1

这是我的网站加载动画的CSS。由于你没有提供任何图像，我将以我的为例。

注意animate财产。 synatx如下：

  

动画：名称持续时间 - 功能延迟迭代 - 计数方向;

在我的情况下direction被省略。

图像：

.loader {
    display: inline-block;
    width: 32px !important;
    height: 32px !important;
    background-image: url("loader.png");
    background-repeat: no-repeat;
    background-size: 2400px 32px;
    animation: play16 3.25s steps(75) infinite;
}
@keyframes play32 {
   from { background-position:    0px; }
     to { background-position: -2400px; }
}

在steps(75)中，数字必须与精灵包含的'帧'数量相匹配，否则动画会被切断或者某些帧会重复。

我使用prefix-free来消除对供应商前缀的需求。您可以使用它，也可以手动为代码添加前缀。

Answer 2

感谢所有回复的人！

所以，我做错了：

.animate {
  background-image: url(image-strip-with-a-11-block);
  width: 53px;
  height: 78px;
  background-position: 0, 0;
  animation:play 1s infinite steps(10);
}

@keyframes play {
   0% { background-position:    0px; }
   25% { background-position: 100px, 0px; }
   50% { background-position: 200px, 0px; }
   75% { background-position: 300px, 0px; }
   100% { background-position: 400px, 0px; }
}

应该是：

.animate {
  background-image: url(image-strip-with-a-11-block);
  width: 53px;
  height: 78px;
  background-position: 0, 0;
  animation:play 1s infinite steps(10);
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

首页，这有助于将来的其他人！

谢谢！