© Scott Dawson, http://scottpdawson.com (607) 279-7173, @scottpdawson

Counting down with jQuery or CSS3 (or, Puff the Magic Countdown)

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)

Check out this Pen!

CSS3 Animation

Check out this Pen!

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;

Leave a Comment

Your email address will not be published. Required fields are marked *