Html 使用CSS3为精灵网格设置动画？

我有这个样本精灵网格表，我需要运行和动画。我能够达到某一点，但努力使之完美。动画不是很平滑，此外，图像没有正确对齐。在动画期间，可以看到图像元素未与视图中的其他元素居中。这是我到目前为止的HTML和CSS3代码

.hi {
    width: 910px;
    height: 340px;
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
    position: relative;
    -webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) infinite; 

}

@-webkit-keyframes playv {
  0% { background-position-y:   0px; }
  100% { background-position-y: 100%; }
}

@-webkit-keyframes playh {
    0% { background-position-x:   0px; }
    100% { background-position-x: 100%; }
}

---

---

---

Fiddle:

我添加了背景尺寸样式，并重新排列了一些属性

结果几乎可以；但是你的精灵网格似乎出了问题

。您好{
宽度：910px；
高度：340px；
背景图像：url（“https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format，压缩）；
位置：相对位置；
动画：播放2s步数（5）无限，播放10s步数（5）无限；
边框：纯色1px蓝色；
背景尺寸：500%500%；
背景重复：无重复；
}
@关键帧播放{
0%{background-position-y:0px；}
100%{背景位置y:125%；}
}
@关键帧播放{
0%{background-position-x:0%；}
100%{background-position-x:125%；}
}

---

我添加了背景尺寸样式，并重新排列了一些属性

结果几乎可以；但是你的精灵网格似乎出了问题

。您好{
宽度：910px；
高度：340px；
背景图像：url（“https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format，压缩）；
位置：相对位置；
动画：播放2s步数（5）无限，播放10s步数（5）无限；
边框：纯色1px蓝色；
背景尺寸：500%500%；
背景重复：无重复；
}
@关键帧播放{
0%{background-position-y:0px；}
100%{背景位置y:125%；}
}
@关键帧播放{
0%{background-position-x:0%；}
100%{background-position-x:125%；}
}

在我看来，你很难用精灵实现你想要实现的目标（如果我是对的，它就像一个动画gif）。如果我这样做，我会将精灵分割成相同大小的单个图像，并使用一个滑块，滑块之间具有自动转换、快速“淡入”效果，无需用户交互（箭头等）。我会更容易。但这只是我的2美分。Gl与您的项目一起请默认使用标准CSS功能，

动画

和

@关键帧

，而不是其供应商前缀的实验模拟。这可以确保所有现代浏览器都以相同的方式解释您的代码。如果您确实需要支持非常旧的浏览器，而这些浏览器确实需要供应商前缀，那么您可以使用Autoprefixer之类的工具自动添加它们。@Alvaronenéndez:什么是滑块？你能给我举个例子吗？Thanks@llya：当然可以。谢谢滑翔机。。。在我看来，这是最好的一个：在我看来，你很难用精灵实现你想要实现的目标（如果我是对的，它就像一个动画gif）。如果我这样做，我会将精灵分割成相同大小的单个图像，并使用一个滑块，滑块之间具有自动转换、快速“淡入”效果，无需用户交互（箭头等）。我会更容易。但这只是我的2美分。Gl与您的项目一起请默认使用标准CSS功能，

动画

和

@关键帧

，而不是其供应商前缀的实验模拟。这可以确保所有现代浏览器都以相同的方式解释您的代码。如果您确实需要支持非常旧的浏览器，而这些浏览器确实需要供应商前缀，那么您可以使用Autoprefixer之类的工具自动添加它们。@Alvaronenéndez:什么是滑块？你能给我举个例子吗？Thanks@llya：当然可以。谢谢滑翔机。。。这是最好的：

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