Question

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

这是我现在的CSS＆amp; 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;

步骤函数接收正确的参数非常重要，因为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.

CSS3 - 动画精灵网格

1 个答案: