Question

I have a some animation which in the end will hopefully make up a nice CSS-only Vintage Flip Clock.

Basically i have the numbers split into two parts and animate each of the two parts with a 180° Rotation on the X-Axis.

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

However, due to the infinite cycle of the keyframes I have a problem with the z-index – at the end of the cycle the wrong figure is on top, thus for a brief moment the wrong digits are shown.

I have two demo-versions of the animation (currently only webkit prefixed):

z-index predeclared

reordered markup

The first one uses z-index in the animation cycles, the latter one uses the natural ordering (and thus the default z-index) of the figures.

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

The keyframes 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 wonder why they seem to look so strange – it’s to prevent further animation which would 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 cycle. Also one of the above demos has some flickering. Do you have any idea how to fix this? I can’t seem to wrap my head around this.

^{Sidenote: Is SASS choking on the @keyframe directive, because the animations won’t get played when I switch the CSS Panel to SCSS?}

Answer 1

Here you go:

http://jsfiddle.net/2TAc4/

It’s a combination of the two you posted. With natural ordering they all have the same index. So using this concept, we toggle between 0, 1, and 2.

I slowed it down (helps a lot) and used a background color to see the 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/