5

请阅读以下内容以了解我的最终编辑！

是否可以在没有帧之间动画的情况下使用 CSS3 动画？

例如，我有一个图像，上面有两个角色动画精灵。它们均匀间隔 50 像素。当我使用下面的动画时，我仍然得到一个补间（虽然一个非常快的补间，所以它看起来像一个闪烁）。

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

上面的例子是一个 100 像素的图像（图像上的每个精灵都是 50 像素宽）在一个容器 div 中，width: 50px并且overflow:hidden一次只显示一个图像的精灵。

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

4

3 回答 3

9

这是另一个使用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-18T06:37:33.167 回答
1

自从提出这个问题以来已经有一段时间了，但是 CSS3 现在有一个步进计时功能，所以我将它用于精灵动画。从我在http://codepen.io/natedsaint/pen/2/7的 codepen 示例：

/* 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-22T22:54:26.273 回答
0

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

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

更新：步骤函数转换已添加到规范中，现在在 Chrome 中实现，所以现在你想做的事情是可能的。

于 2010-12-21T23:06:58.523 回答