CSS3 animations with transform causes blurred elements on Webkit

Question

So I\'ve got some native elements (divs) with various effects applied to them (border-radius, box-shadow and transform: scale()<

Answer 1

The best way I found is to wait the animation is complete, then apply the transforms directly to the element and remove the animation class. Something like this works for me, producing no glitches:

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
});

I'm using a different library than jQuery, but you get the idea.