没有补间的 CSS3 Sprite 动画

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);}

因此，根据上述内容，精灵帧应在前 0-49% 的持续时间内保持在图像的第一部分 (x = 0px)，然后跳转到图像的第二部分 (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);}

最终编辑！：< /强> 好的，根据我发现的网络工具包动画百分比将接受小数到百万位（即 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 内的 100 像素图像（图像上的每个精灵宽 50 像素），且 width: 50px 和 overflow:hidden 仅一次显示图像上的一个精灵。

注意：我使用translate3d，因为它在移动浏览器中进行硬件加速，其中translateX、translateY、translateZ 尚未硬件加速。

Answer 1

这是另一个使用 步骤()。

这是一种简单而强大的精灵动画方式。下面是老公爵挥手的动画。

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

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

<img src="https://i.sstatic.net/1Ad8o.png">
<div class="hi"></div>

您可以在 cssdeck 上玩一个演示。

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

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

Answer 3

CSS 动画的总体思想是制作动画。如果您希望事物从一个位置跳转到另一个位置，那么您可能只需考虑直接通过 JavaScript 设置位置并使用 JavaScript 进行迭代。

但是，如果您确实想使用动画，您有几个选择。一种是将不透明度设置为零，然后使用两个填充关键帧将其恢复为一。或者更改 z-index 以在翻译发生时将动画对象隐藏在遮罩 div 后面。 z 索引不补间。

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