不使用缓动实现CSS3精灵动画

Question

请查看我的最终编辑！

是否可以在不让动画在帧之间缓动的情况下使用CSS3动画？

例如，我有一张图片，上面有两个字符动画精灵。它们平均间隔50px。当我使用以下动画时，仍然会出现缓动（虽然非常快，以便看起来像闪烁）。

#ball .animated{
        -webkit-animation-name: animate;
        -webkit-animation-duration: .5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;}
@-webkit-keyframes animate{
        0%{-webkit-transform: translate3d(0,0,0);}
        49%{-webkit-transform: translate3d(0,0,0);}

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

根据上述内容，精灵帧应该在图像的第一部分（x = 0px）持续0-49％的时间，然后跳转到图像的第二部分（x = -50px），持续50-100％。然而，1％的差异仍足以在视觉上看到从0到-50px的缓动效果。

您有什么想法？

编辑：

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

上述方法似乎有点解决了问题，但过一会儿又开始闪烁。

编辑： 我没有意识到百分比可以使用小数。将间隔从1%缩小到0.1%，可以创建一个更快的补间动画，几乎不可见（当 -webkit-animation-duration: < 1s; 时）。

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动画百分比可以接受小数点后六位的十进制数（例如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);
 }
}

上面的例子是一个包含100px图片的示例（图像上的每个精灵都是50px宽），放在一个容器div中，该容器的width: 50px和overflow:hidden属性只显示一张图片。

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

- Empereol

---

我目前正在尝试使用垂直线的三次贝塞尔曲线。 - Empereol

Empereol：不幸的是，CSS动画目前不支持非缓动关键帧。您的解决方案在非常快的计算机上可能看起来不一样（因为您仍然可以在两个状态之间捕捉到一些帧）。我建议使用sprite.js http://www.readwriteweb.com/hack/2010/12/spritejs-javascript-sprite-framework.php ，这个库做得很好。 - methodofaction

数据应该放在HTML中，样式应该放在CSS中，交互应该放在JS中。听起来你似乎想用样式语言来创建交互。 - zzzzBov

Answer 1

这里有另一个很好的例子，使用steps()。

它是一种简单而强大的动画精灵的方法。下面是一个旧版杜克挥手的动画。

@keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
}

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://i.stack.imgur.com/1Ad8o.png");
    margin: 0 auto;      
    animation: wink .8s steps(10, end) infinite;
}

<img src="http://i.stack.imgur.com/1Ad8o.png">
<div class="hi"></div>

There's a demo you can play with on cssdeck.

- omrsin

Answer 2

这个问题已经有一段时间了，但是CSS3现在有一个步骤计时函数，所以我已经用它来制作精灵动画。从我的codepen示例http://codepen.io/natedsaint/pen/2/7中可以看到：

/* 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;
} 

这样做的好处是，您可以通过更改动画的持续时间来调整速度。我已经实现了一个滑块来展示这一点。

- NateDSaint

Answer 3

CSS动画的一般思路是实现动画效果。如果你想让物体从一个位置跳到另一个位置，那么你可以考虑直接通过JavaScript设置位置，并使用JavaScript进行迭代。

然而，如果你确实想要使用动画效果，有几种选择。其中一种是使用两个填充关键帧将不透明度设置为零，然后再设置为一。或者，当翻译发生时，更改z-index以隐藏你的动画对象在遮罩div后面。z-index不会缓动。

更新：步进函数转换已添加到规范中，并已在Chrome中实现，因此现在你想要做的是可能的。

- Michael Mullany