javascript - 如何从 strip 创建步进动画？

Question

我正在使用 strip (单个图像中的一组图像 block )通过仅使用 css 关键帧来制作元素背景动画。但它不能正常工作，因为我不希望过渡是线性的，而是分步进行的:

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

我尝试了或多或少显示了我想要实现的目标的“步骤结束”。我目前正在阅读文档 ( http://www.w3.org/TR/css3-transitions/ )，看起来这是可能的，通过我们自己创建计时函数？

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

Answer 1

这是我的 CSS，用于从我的网站加载动画。由于您没有提供任何图片，我将提供我的图片作为示例。

注意 animate 属性。语法如下:

animation: name duration timing-function delay iteration-count direction;

在我的例子中，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) 中，数字必须与 Sprite 包含的“帧”数量相匹配，否则动画会中断或某些帧会重复。

我使用 prefix-free消除对 vendor 前缀的需要。您可以使用它，也可以手动为代码添加前缀。