没有补间的CSS3 Sprite Animation

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

上面的例子是一个100px的图像(图像上的每个sprite是50px宽),在一个容器div中,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

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

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

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