Main image for Counting down with jQuery or CSS3 (or, Puff the Magic Countdown) Time to Read: ~1 min

I've been playing Real Racing 3 on iPhone lately, and as you change places during the race, your place number at the top right corner has a cool puff effect to animate the place change. I wanted to replicate this effect on a web page, so went about it using two different techniques: jQuery UI (puff transition) and CSS3 animation of transition, transform and opacity.

jQuery UI (puff transition)

CSS3 Animation

In the CSS3 version, I noticed a full-screen white flicker on Chrome when the animation cycled. A few searches later, I found a combination of CSS that removed the flicker, applied to the element being animated. You'll see this code commented in the pen.

-webkit-perspective: 1000;  
-webkit-backface-visibility: hidden;

Subscribe to Wanderfull

Did you enjoy this? Did it help you? Make you laugh? Dare I say, all of the above? If you like my work — my writing, distributed work tips, or drawing, you can get more every week. Subscribe below for my weekly Substack: Wanderfull!