CSS3 Sprite动画无补间

阅读下面的我的最终编辑！CSS3 Sprite动画无补间

是否有可能使用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 = 0像素）的持续时间的第一0-49％的第一部分，然后跳转到的第二部分图像（x = -50px）为50-100％。但是，1％的差异仍然足以在视觉上看到从0到-50px的补间。

想法？

编辑：

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

上面似乎抚平了一点，但过了一段时间，又回到闪烁。

编辑：我没有意识到你可以使用百分比的小数。关闭1％的差距缩小到0.1％，将创建一个更快吐温这只是不可见;从我

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-animation-duration: < 1S）发现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); 
} 
}

上面的例子是100像素（图像上的每个子画面是50像素宽）与width: 50px和overflow:hidden到仅div容器内示出了一个子画面关闭图像在图像的一次。

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

来源

2010-12-21 Empereol

我目前正在尝试使用垂直线的立方贝塞尔。 – Empereol 2010-12-21 19:44:34

CSS动画的总体思路是，动画。如果你想让事情从一个位置跳到另一个位置，那么你可能只考虑通过JavaScript直接设置位置，并用JavaScript来做迭代。

但是，如果你确实想使用动画，你有几个选择。一种是将不透明度设置为零，然后回到具有两个填充关键帧的透明度。或者在翻译发生的时候改变z-index来隐藏遮罩div后面的动画对象。 z-indexes不会补间。

更新：阶段函数转换已被添加到规范，现在在Chrome中实现，所以现在你想做什么是可能的。

来源

2010-12-21 23:06:58

自问这个问题已经有一段时间了，但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; 
}

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

来源

2012-06-22 22:54:26 NateDSaint

这是另一个很好的例子，使用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玩。

来源

2012-07-18 06:37:33 omrsin

CSS3 Sprite动画无补间

回答

相关问题