CSS 动画中的非动画帧序列

Question

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

In this fiddle 我正在使用 Javascript 和转换来将一个元素向左滑出，将其重新定位到右侧，然后将其滑回。命令式逻辑有点像这样：

1. 关闭转换并将 translate 属性设置为 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 )，可见性：可见；

...