CSS3 - 动画精灵网格

Question

我一直在尝试理解 CSS 动画属性，我需要运行这个精灵网格表，我已经看到了行和网格样式的动画示例，但是当我尝试应用和适应时我的精灵表显示有问题。

这是我当前的 CSS 和 Html：

.logo {
  width: 120px;
  height: 100px;
  margin: 2% auto;
  background: url('http://res.cloudinary.com/df0nhzq7v/image/upload/v1484325835/bvd2_1024_fxwhvl.png') left top;
  -webkit-animation: playv .6s steps(6) infinite, playh 1s steps(6) 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="logo"></div>

Codepen：http://codepen.io/BenSagiStuff/pen/ZLOJKM

Answer 1

这里有几个问题。首先是您的动画属性具有不正确的值。您需要将其更改为：

animation:
  playv .6s steps(6) infinite, 
  playh 1s steps(6) infinite;

到：

animation: 
  playv 5s steps(5) infinite,
  playh 1s steps(7) infinite;

steps 函数接受正确的参数很重要，这样 playv 包含 y 方向的精灵数量，而 playh 包含 x 方向的精灵数量。 playv 的时间也需要足够慢才能正确地为网格设置动画，实际上相当于将您的持续时间乘以精灵网格中的行数。这可以简化为以下公式：

animation: 
  playv (duration * rows) steps(rows) infinite,
  playh duration steps(cols) 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%; }
}

您要么需要更新精灵网格以使其完美匹配，要么完全像这样指定像素：

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

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

Here's the working codepen.