请阅读以下内容以了解我的最终编辑!
是否可以在没有帧之间动画的情况下使用 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 尚未硬件加速的移动浏览器中进行了硬件加速。