CSS3 - 动画精灵网格

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

这是我目前的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

来源

2017-01-16 B. Davies

有在剧中的几个问题在这里。首先是你的动画属性有不正确的值。你需要从改变：

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.

来源

2017-01-16 12:33:54

我明白了！感谢您解释动画属性！ –

CSS3 - 动画精灵网格

回答

相关问题