CSS transitions are some of the most exciting things to come out of the new spec for CSS3. It seemed like within minutes of its implementation into webkit, the net was peppered with amazing animations and cool examples of ways to use these new coding toys.

So, I was surprised that when my wife, Gabi Moore, and I were building an app for the 10k App competition from An Event Apart, we couldn’t find a good example or tutorial of how to achieve what we felt was a very simple animation effect. What we wanted to do was have an object that has an image on the front, and text on the back, and when you hover over the image, it flips around horizontally to show the text on the other side.

Now I’m not saying there weren’t any examples, but the few we managed to find were confusing, and the markup looked like a div graveyard. Also, Safari appears to have implemented the backface property of transitions, but it seems Chrome has not (or at least that’s what it looked like based on our comparison of animations between the two browsers). Quite a few of the examples we saw looked good in Safari, but had an ugly flash or lack of transition at all as the object was flipping over in Chrome.

The effect basically requires two separate animations to look good on both browsers: A rotation on the y-axis of 180 degrees for both elements, and something to change the visibility of the object on the other side as the rotation progresses. Most of the examples we saw used opacity to achieve this. However, we decided to use z-index, instead of opacity. That way, the text would still be selectable, instead of hidden behind an invisible image element.

The problem we encountered was in timing. We guessed at numbers that seemed right for awhile, firing off shot after shot in the dark at combinations of rotation animation time length, z-index transition time length, and z-index values. We had a vague idea that they needed to change in the middle of the animation, but we were pretty much just trying random numbers and seeing what it looked like. (And it wasn’t lost on us that this is how most people used to do whole stylesheets before standards.)

But once I realized how backward our approach was, I knew we needed to really delve deeper into the numbers themselves to make any sense of what we were doing. You know, like, to have a plan? After a few quick sketches and calculations, we hit upon the solution we needed to make the transition flawless, while preserving the integrity of the now visible and selectable text.

The answer? Make a timeline. What we needed, was to have the two layers “trade places” in the right place, where one element achieves a higher z-index value than the other in the exact middle of the y-rotation animation. So, I looked at the time we had chosen (.4 seconds), and I drew a timeline with .1 of a second for each marker:

Since there were five stops on the timeline, I used “2″ and “3″ to be the point where the two layers “traded places”. But these numbers are arbitrary, as long as they are one apart at the exact middle.

Then, I just counted out the numbers on each side of both elements to the ends of the timeline.

… which left me with z-index values of 0-4 and 1-5. Ha! We would have never “just guessed” those numbers.

It feels like it would be more precise if the two values were exactly equal at the exact middle, but we tried doing it with a symmetrical set of values a few times, and it didn’t work for our specific situation. But at least in theory, values of 0-4 and 4-0 should be just as affective, we just didn’t feel the need to change it after we tried the values described above, since it looks so good.

You can see the results of our work on this app. So thank you, math class. I wouldn’t have thought of a timeline without you.