使用 CSS3 为 Sprite 网格设置动画？答案

【问题标题】：Animate a Sprite grid using CSS3?使用 CSS3 为 Sprite 网格设置动画？
【发布时间】：2017-08-28 22:11:29
【问题描述】：

我有这个示例精灵网格表，我需要运行它并制作动画。我能够达到某个点，但努力使其完美。动画不是那么流畅，另外，图像没有正确对齐。在动画期间，您可以看到未与视图中的其他元素居中的图像元素。到目前为止，这是我的 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%; }
}

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

小提琴：http://jsfiddle.net/bf5ckdv9/

【问题讨论】：

在我看来，用精灵很难实现你想要实现的目标（如果我是对的，它就像一个动画 gif）。如果我要这样做，我会将精灵拆分为相同大小的单个图像，并使用具有自动过渡的滑块、滑块之间的快速“淡入淡出”效果，无需用户交互（箭头等）。我会更容易。但这只是我的 2 美分。 Gl 与您的项目
请默认使用标准 CSS 功能，animation 和 @keyframes，而不是它们的供应商前缀实验类似物。这确保您的代码将被所有现代浏览器以相同的方式解释。如果您确实需要支持确实需要供应商前缀的非常旧的浏览器，您可以随时使用 Autoprefixer 等工具自动添加它们。
@AlvaroMenéndez：什么是滑块？你能给我举个例子吗？谢谢
@llya：当然。谢谢
滑块...这是最好的 imo：github.com/Codeinwp/Nivo-Slider-jQuery

标签： html css animation sprite

【解决方案1】：

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

结果几乎没问题；但是你的精灵网格似乎有问题

.hi {
    width: 910px;
    height: 340px;
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
    position: relative;
    animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite; 
    border: solid 1px blue;
    background-size: 500% 500%;
    background-repeat: no-repeat;
}

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

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

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

【讨论】：