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

最终修改！： 好的，所以从我发现的web-kit动画百分比将接受小数到百万分之一（即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（图像上的每个sprite为50px宽）的图像，width: 50px和overflow:hidden只能在图像上显示一个精灵

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

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>

您可以在cssdeck上进行演示。

Answer 2

自问这个问题以来已经有一段时间了，但CSS3现在有一个步进计时功能，所以我用它来进行精灵动画。来自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-indexes不是补间。

更新：步骤功能转换已添加到规范中，现在已在Chrome中实现，因此现在您可以执行此操作。

没有补间的CSS3 Sprite Animation

3 个答案: