Non-animated frames sequences in CSS animations

Question

Is there a way that CSS3 animations can jump straight between 2 keyframes without tweening?

In this fiddle I'm using Javascript and transitions to slide an element out to the left, reposition it to the right, and slide it back in. The imperative logic goes a bit like this:

1. Turn transitions off and set the translate property to 0.
2. At the end of an instant setTimeout, turn transitions on and set translate to off-screen left
3. On transition end, turn transitions off again and set translate to off-screen right
4. At the end of an instant setTimeout, turn transitions on and set translate to 0

Meanwhile, a CSS animation can only

1. Set translate to 0
2. Set translate to off-screen left
3. Set translate to off-screen right
4. Set translate to 0

Because all properties in the animation are implicitly animated, I don't get to jump between steps 2 & 3 — the best I can do is set the keyframes to be infinitesimally close in the hope that the user doesn't perceive the movement. 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 );
  }
}

Am I limited to Javascript for solving this, or can it be done using the CSS animations module?

Answer 1

try this hack

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

50.0001%: -webkit-transform: translate3d( -1920px, 0, 0 ), visibility: hidden; (or opacity: 0)

50.0002%: -webkit-transform: translate3d( 1920px, 0, 0 ), visibility: hidden;

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

...