Endless animated keyframes and the z-index problem at the end of the loop

Question

I have some kind of animation that, in the end, hopes to make beautiful CSS Vintage Flip Clock .

Basically, I have numbers divided into two parts and animating each of the two parts with a 180 ° rotation on the X axis.

╔═══════╗ ║ ## ║ ║ ### ║ ║ # ## ║ ║ ## ║ ╠═══════╣ ║ ## ║ ║ ## ║ ║ ## ║ ║ #### ║ ╚═══════╝ 

However, due to the endless loop of key frames, I have a problem with the z-index - at the end of the loop, the wrong digit is on top, so the wrong digits are displayed for a short time.

I have two demos of the animation (currently only a prefix for webkit):

z-index is predefined

reordered markup

The former uses the z-index in the animation cycles, the latter uses the natural ordering (and therefore the default z-index) of the shapes.

 <div class="nr"> <div class="top t0">0</div> <div class="bottom b0">0</div> <!-- 1 to 9 --> </div> 

The key frames are the following (first example):

 .top{ -webkit-transform-origin:50% 100%; -webkit-animation-name: flipT; } .bottom{ -webkit-transform-origin:50% 0; -webkit-animation-name: flipB; -webkit-transform: rotateX(180deg); } @-webkit-keyframes flipT { from{-webkit-transform:rotateX(0deg) } 10% {-webkit-transform:rotateX(-180deg);} 90% {-webkit-transform:rotateX(-180deg);} 91% {-webkit-transform:rotateX(0deg); } } @-webkit-keyframes flipB { from{-webkit-transform:rotateX(180deg);z-index:100;} 10% {-webkit-transform:rotateX(0deg); } 11% {z-index:0;} 20% {-webkit-transform:rotateX(0deg); } 21% {-webkit-transform:rotateX(180deg);} } 

If you're wondering why they seem so weird - to prevent further animation that might cause flickering, you can see this by changing the perspective to some low value.

You will see the z-index problem at the end of the loop. Also, one of the above demos has some flicker. Do you have an idea how to fix this? I don’t seem to wrap my head around it.

^{Sidenote: SASS suffocating in the @keyframe directive because animations will not play when switching CSS panel in SCSS?}

Answer 1

Here you go:

http://jsfiddle.net/2TAc4/

This is a combination of the two you sent. With natural ordering, they all have the same index. Therefore, using this concept, we switch between 0, 1 and 2.

I slowed it down (it helps a lot) and used the background color to see how frames change.

Here's the key part:

 @-webkit-keyframes flipT { from{-webkit-transform:rotateX(0deg); z-index:1;} 10% {-webkit-transform:rotateX(-180deg);} 90% {-webkit-transform:rotateX(-180deg);} 91% {-webkit-transform:rotateX(0deg); z-index:0;} } @-webkit-keyframes flipB { from{-webkit-transform:rotateX(180deg); z-index: 2;} 10% {-webkit-transform:rotateX(0deg);} 18% {-webkit-transform:rotateX(0deg);} 19% {-webkit-transform:rotateX(180deg); z-index: 0;} } 

Here's the final version:

http://jsfiddle.net/S6EMe/