CSS动画中的非动画帧序列

有没有办法让CSS3动画可以在2个关键帧之间直接跳跃而不进行补间？。CSS动画中的非动画帧序列

In this fiddle我使用Javascript和过渡到一个元素出来向左滑动，它重新定位到右侧，并滑回祈使句的逻辑去有点像这样：

转到过渡off并将翻译属性设置为0.
在即时setTimeout结束时，打开过渡并将翻译设置为离屏左边
在过渡结束时，再次关闭过渡并将翻译设置为关闭屏幕右侧
在结束时瞬间的setTimeout，上翻转换和设置转换为0

同时，CSS动画只能

集转换为0
集转换为关闭屏幕左
集翻译屏幕外右侧
集转换为0

Becau se动画中的所有属性都是隐式动画，我无法在步骤之间跳转3 - 我能做的最好的事情是将关键帧设置为无限小，以期用户不会感知到运动。 This example is functional, but feels like a hack。

@-webkit-keyframes slideInOut { 
    0% { 
    -webkit-transform: translate3d(  0, 0, 0); 
    } 
    50% { 
    -webkit-transform: translate3d(-1920px, 0, 0); 
    } 
    50.0001% { 
    -webkit-transform: translate3d( 1920px, 0, 0); 
    } 
    100% { 
    -webkit-transform: translate3d(  0, 0, 0); 
    } 
}

我是否仅限于Javascript来解决这个问题，还是可以使用CSS动画模块来完成？

来源

2013-12-18 Barney

我想你已经找到了最好的方法。 – Jivings

我同意Jivings，我使用这种方法[所有的时间]（http://cssdeck.com/labs/falling-circles） –

尝试这种劈

50％：-webkit变换：translate3d（-1920px，0，0）;

50.0001％：-webkit-transform：translate3d（-1920px，0,0），visibility：hidden; （或不透明度：0）

50.0002％：-webkit-transform：translate3d（1920px，0，0），visibility：hidden;

50.0003％：-webkit-transform：translate3d（1920px，0,0），visibility：visible;

...

来源

2014-01-23 09:50:43 bonbonez

优秀的思维 - 短暂的消失比简短的幻灯片更好。 – Barney

CSS动画中的非动画帧序列

回答

相关问题