Question

有没有一种方法可以让CSS3动画在没有补间的情况下直接在两个关键帧之间跳转？

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

关闭转场并将translate属性设置为0.
在即时setTimeout结束时，启用转换并将转换设置为屏幕外左侧
在转换结束时，再次关闭转换并将转换设置为屏幕右侧
在即时setTimeout结束时，打开过渡并将translate设置为0

同时，CSS动画只能

将翻译设为0
将翻译设置为离屏左侧
将翻译设置为屏幕右侧
将翻译设为0

因为动画中的所有属性都是隐式动画的，所以我不会在步骤2和步骤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），visibility：hidden; （或不透明度：0）

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

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

...

CSS动画中的非动画帧序列

1 个答案: