如何使用CSS精灵制作动画（无论是A还是B）？

Question

我正在编写一个使用html、css和javascript的phonegap应用程序，但是在动画部分遇到了困难，尽管我正在使用简单的基本精灵表动画。

A) 我尝试了基本的动画方法，但我有两个问题:

1) 如果我没有完整的网格精灵表，可能会显示出空帧，我不知道如何跳过它们而不需要将整个精灵表转换为一行。(我听说可以定义每一帧，但我真的找不到如何做到，我搜索了所有地方!)

2) 除了空白帧之外，在桌面上展示的动画效果很好，但当我在移动设备上尝试时，它看起来像这样(http://jsfiddle.net/alecstheone/5pqmsd4a/4/)就好像步骤和速度没有同步。如果我尝试在移动浏览器中运行jsfiddle，所有东西都像桌面上展示的一样。

这是第一个代码:

HTML:

<div id="container">
    <div class="hi"></div>
</div>

CSS:

.hi {
    width: 389px;
    height: 238px;
    background-image: url("http://i.imgur.com/XOmx2Mm.png");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 1.2s steps(6) infinite, playh 0.2s steps(9) infinite;
}
#container {
}
/* .hi:before {
    content: "";
    position: absolute;
    width: 176px;
    height: 108px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(9) infinite; 
}  */
 @-webkit-keyframes playv {
    0% {
        background-position-y: 0px;
    }
    100% {
        background-position-y: -1429px;
    }
}
@-webkit-keyframes playh {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: -3500px;
    }
}

B) 我尝试使用spritespin.js进行动画制作，这比之前的代码要容易得多。它计算精灵表中的所有帧，因此不会显示任何空帧，但是它也有两个问题（在桌面和移动设备上都存在）：

1）动画看起来很卡顿。我认为，这只是一个新手的想法，即脚本试图计算每个帧的大小并且出现了很大的混乱（即使我设置了宽度和高度）。是否可以跳过该部分？所有渲染方法（背景、图像以及canvas）都会出现这种情况，在移动设备和桌面上均如此。

2）背景大小也没有正确计算。您可以看到一些残留物位于动画的顶部，而它们应该在底部。是否可以通过几个像素更改背景大小？我在两个版本中使用相同的精灵表，因此我不认为是由于精灵表引起的..或者？

这里是第二个代码:

JS：

.../*! SpriteSpin - v3.1.5
 * Copyright (c) 2014 ; Licensed  */...

$(".hi").spritespin({
    source: "http://i.imgur.com/XOmx2Mm.png", // path to sprite sheet
    width: 390, // width in pixels of the window/frame
    height: 239, // height in pixels of the window/frame
    frames: 51, // total number of frames
    framesX: 9, // number of frames in one row inside the spritesheet
    frameTime: 60,
    renderer: 'image'
});

请帮我完全解决A或B的问题！！我已经在这个问题上纠结了三天了，非常烦恼！！

- Alex Stanese

---

你可以查看这个链接： https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb - Mrug

Answer 1

好的，也许最简单（但有点无聊）的方法是逐个指定所有关键帧。如果您有51个帧，每个帧持续1.96％。为每个帧指定起始时间和结束时间以获得阶梯状运动。

@-webkit-keyframes playv {
    0%, 1.96% {
        background-position: 0px 0px;
    }
    1.96%, 3.92% {
        background-position: 50px 0px;
    }
    3.92%, 5.88% {
        background-position: 100px 0px;
    }
}

- vals

---

谢谢回复。我以为会有更简单的方法（不需要计算百分比）。我会尝试一下并告诉你我做到了什么 :D - Alex Stanese

Answer 2

查看完整教程，演示如何创建类似Dropbox主页的动画， https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

.animatedDiv {
    width: 820px;
    height: 312px;
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
    -webkit-animation: play 2s steps(48) infinite;
    -moz-animation: play 2s steps(48) infinite;
    -ms-animation: play 2s steps(48) infinite;
    -o-animation: play 2s steps(48) infinite;
    animation: play 2s steps(48) infinite;
}
@-webkit-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-moz-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-ms-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-o-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}

- Mrug