javascript - CSS 动画中的非动画帧序列

Question

有没有一种方法可以让 CSS3 动画在 2 个关键帧之间直接跳转而无需补间？

In this fiddle我正在使用 Javascript 和过渡将元素滑出到左侧，将其重新定位到右侧，然后再滑回。命令式逻辑有点像这样:

1. 关闭转换并将翻译属性设置为 0。
2. 在即时 setTimeout 结束时，打开过渡并将转换设置为离屏左侧
3. 在过渡结束时，再次关闭过渡并将翻译设置为屏幕外右侧
4. 在即时 setTimeout 结束时，打开转换并将转换设置为 0

同时，一个CSS动画只能

1. 设置翻译为0
2. 将翻译设置为离屏左侧
3. 将翻译设置为离屏右侧
4. 设置翻译为0

因为动画中的所有属性都是隐式动画的，所以我不能在步骤 2 和 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 动画模块来完成？

Answer 1

试试这个技巧

50%: -webkit-transform: translate3d( -1920px, 0, 0 );

50.0001%: -webkit-transform: translate3d( -1920px, 0, 0 ), 可见性: 隐藏; (或不透明度:0)

50.0002%: -webkit-transform: translate3d( 1920px, 0, 0 ), 可见性: 隐藏;

50.0003%: -webkit-transform: translate3d( 1920px, 0, 0 ), visibility: visible;

...