Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

infinite animation keyframes & z-index issue at the end of the cycle

infinite animation keyframes & z-index issue at the end of the cycle

Problem

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.

0
0

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?

Problem courtesy of: Christoph

Solution

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/

Solution courtesy of: Luke

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

infinite animation keyframes & z-index issue at the end of the cycle

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×