Animation CSS3无花呢精灵动画

请阅读下面的内容，以进行我的最终编辑

是否可以使用CSS3动画而不在帧之间使用动画

例如，我有一个图像，上面有两个角色动画精灵。它们以50像素的间隔均匀分布。当我使用下面的动画时，我仍然会得到一个tween（虽然tween非常快，所以看起来像闪烁）

因此，基于上述情况，sprite帧应在图像的第一部分（x=0px）保持0-49%的持续时间，然后跳转到图像的第二部分（x=-50px）保持50-100%。然而，1%的差异仍然足以从视觉上看到介于0到-50px之间的二者

想法

编辑：

上面这句话似乎有点理直气壮，但过了一会儿，它又开始闪烁了

编辑： 我还没意识到你可以用小数来表示百分比。将差距从1%缩小到0.1%将创建一个几乎不可见的快得多的tween（使用

-webkit动画持续时间：

<1s；）

最终编辑！： 好的，从我发现的网络工具包动画百分比将接受小数点到第一百万位（即0.0001）。在相对快速的动画计时器上，这将导致即时转换。我想这有点像黑客，但它确实奏效了

例如：

@-webkit-keyframes sprite {
 0% {
   -webkit-transform: translate3d(0,0,0);
 }
 50% {
   -webkit-transform: translate3d(0,0,0);
 }
 50.0001%{
   -webkit-transform: translate3d(-50px,0,0);
 }
 100%{
   -webkit-transform: translate3d(-50px,0,0);
 }
}

上面的示例是容器div中100px的图像（图像上的每个精灵宽度为50px），其

宽度：50px

和

溢出：隐藏

一次仅显示图像中的一个精灵

---

注意：我使用translate3d是因为它在移动浏览器中是硬件加速的，而translateX、translateY、translateZ还没有硬件加速。

CSS动画的一般思想是，嗯，动画化。如果你想让事情从一个位置跳到另一个位置，那么你可以直接考虑通过JavaScript直接设置位置，并用JavaScript进行迭代。 但是，如果确实要使用动画，则有几个选项。一种是使用两个填充关键帧将不透明度设置为零并返回到一。或者，在进行平移时，更改z索引以将动画对象隐藏在遮罩div后面。z-索引不会在二者之间

---

更新：阶跃函数转换已经添加到规范中，现在在Chrome中实现，所以现在您想要做的事情是可能的。

这个问题已经有一段时间了，但是CSS3现在有一个阶跃计时函数，所以我在精灵动画中使用了它。从我的代码笔示例：

---

这样做的好处是，可以通过将动画的持续时间更改为较低的数字来改变速度。我已经实现了一个滑块来显示这一点

下面是另一个很好的例子

这是制作精灵动画的一种简单而强大的方法。下面是老公爵挥舞的动画

@关键帧闪烁{
从{背景位置：0px；}
至{背景位置：-500px；}
}
.嗨{
宽度：50px；
高度：72px；
背景图像：url（“http://i.stack.imgur.com/1Ad8o.png");
保证金：0自动；
动画：wink.8s步数（10，结束）无限；
}

我目前正尝试使用垂直线的立方贝塞尔。Empereol：不幸的是，css动画目前不支持非tweening关键帧。在速度非常快的计算机上，您的解决方案可能看起来不一样（因为您仍然能够捕获两个状态之间的一些帧）。我建议使用sprite.js，这很好。数据属于HTML，样式属于CSS，交互属于js。在我看来，你似乎在试图用一种风格化语言创建一种交互。

-webkit-animation-timing-function: cubic-bezier(1,0,1,0);

0%{-webkit-transform: translate3d(0,0,0);}
49.9%{-webkit-transform: translate3d(0,0,0);}

50%{-webkit-transform: translate3d(-50px,0,0);}
100%{-webkit-transform: translate3d(-50px,0,0);}

@-webkit-keyframes sprite {
 0% {
   -webkit-transform: translate3d(0,0,0);
 }
 50% {
   -webkit-transform: translate3d(0,0,0);
 }
 50.0001%{
   -webkit-transform: translate3d(-50px,0,0);
 }
 100%{
   -webkit-transform: translate3d(-50px,0,0);
 }
}

/* Animation keyframes */
@keyframes walk {
  0% { background-position:0px 0px;}
  16.67% { background-position:-104px 0px;}
  33.33% { background-position:-208px 0px;}
  50% {background-position:-320px 0px;}
  66.66% { background-position:-416px 0px;}
  80.65% { background-position:-520px 0px;}
  100% { background-position:-624px 0px;}
}

#guyBrush {
  animation: walk infinite 1s steps(1,end);
  background-image:url('http://www.nathanstpierre.com/gb_walk.png');
  width:104px;
  height:152px;
  position:absolute;
  top:160px;
  left:360px;
}