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)
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.