Le animazioni CSS3 con trasformazione provocano elementi sfocati su Webkit

Question

Quindi ho alcuni elementi nativi (div s) con vari effetti applicati a loro (border-radius, box-shadow e transform: scale()). Quando li anima, accadono due cose strane:

1. Anche se non sto provando ad animare la scala, se non inserisco la scala nell'animazione, viene ignorata.
2. Quando ho messo la scala nell'animazione, Webkit offusca gli elementi

veda l'esempio qui: http://jsfiddle.net/trolleymusic/RHeCL/ - i pulsanti nella parte inferiore farà scattare i problemi.

Il primo problema si verifica anche in Firefox, quindi suppongo che sia così che si suppone che le specifiche dell'animazione funzionino. Non è quello che volevo, ma ok, ci vivrò.

Il secondo problema è strano. So che ha a che fare con 3d transform perché se io (solo per scopi di test) dichiarare -webkit-perspective o -webkit-transform-style: preserve-3d; sugli elementi del cerchio, causa anche il problema di sfocatura. La mia confusione è che non sto cercando di trasformare l'indice z come tutto, e ho anche provato le animazioni usando semplicemente translateY invece di translate.

Accade in Chrome (18), Chrome Canary (20) e Safari (5.1.2 & 5.1.4).

Quindi, ho ragione in quello che penso stia succedendo? E come posso evitare la sfocatura?

Scenario peggiore: posso semplicemente utilizzare diverse dimensioni per gli elementi anziché ridimensionarli, non è davvero un problema, ma ho pensato che sarebbe stata una soluzione più elegante e ora questo problema è saltato fuori.

Answer 1

fare riferimento a questa risposta perché è sfocatura l'elemento: https://stackoverflow.com/a/4847445/814647

Sintesi di quanto sopra: WebKit sta prendendo l'originale dimensione/CSS prima animazione e trattandolo come immagine, quindi scala in su producendo la sfocatura.

Soluzione: Trasforma la dimensione iniziale nella scala più grande e inizia inizialmente con una scala inferiore (quindi nel tuo caso vorrai aumentare la dimensione di 5 e impostare la scala iniziale su 0,2)

UPDATE

il motivo per cui ignora la scala corrente da quanto ho capito è perché non si è specificamente impostando solo la tradurre (sto cercando il CSS per ora). Quando esegui -webkit-animation, ripristina tutte le tue trasformazioni correnti (scala), quindi devi assicurarti di avere le tue scale lì. Sto cercando il css da cambiare, quindi cambia solo la posizione:

Answer 2

Il modo migliore che ho trovato è aspettare che l'animazione sia completa, quindi applicare le trasformazioni direttamente all'elemento e rimuovere la classe di animazione. Qualcosa come questo funziona per me, la produzione senza difetti:

$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'); 
}); 

sto usando una libreria diversa di jQuery, ma si ottiene l'idea.