texto - transiciones css ejemplos

Las animaciones CSS3 con transformación causan elementos borrosos en Webkit

Question

Así que tengo algunos elementos nativos ( div s) con varios efectos aplicados ( border-radius , box-shadow y transform: scale() ). Cuando los animo, suceden dos cosas raras:

1. Aunque no estoy tratando de animar la escala, si no coloco la escala en la animación, se ignora.
2. Cuando coloco la escala en la animación, Webkit difumina los elementos

Vea el ejemplo aquí: http://jsfiddle.net/trolleymusic/RHeCL/ - los botones en la parte inferior activarán los problemas.

El primer problema también ocurre en Firefox, así que supongo que es porque así se supone que funciona la especificación de animación. No es lo que quería, pero está bien, viviré con eso.

El segundo problema es simplemente extraño. Sé que tiene que ver con la transformación 3d porque si (solo para fines de prueba) declaro -webkit-perspective o -webkit-transform-style: preserve-3d; en los elementos del círculo, también causa el problema de desenfoque. Mi confusión es que no intento transformar el índice z como todo, y también probé las animaciones utilizando purely translateY lugar de translate .

Sucede en Chrome (18), Chrome Canary (20) y Safari (5.1.2 y 5.1.4).

Entonces, ¿tengo razón en lo que creo que está sucediendo? ¿Y cómo puedo evitar la borrosidad?

En el peor de los casos: puedo usar diferentes tamaños para los elementos en lugar de escalarlos, eso no es realmente un problema, pero pensé que esta sería una solución más elegante y ahora este problema ha surgido.

Answer 1

Consulte esta respuesta sobre por qué está borrando el elemento: https://stackoverflow.com/a/4847445/814647

Resumen de lo anterior: WebKit está tomando el tamaño / CSS original antes de animarlo, y tratándolo como una imagen, ENTONCES lo amplía, produciendo la visión borrosa.

Solución: haga que el tamaño inicial sea la escala más grande a la que se dirige e inícielo inicialmente con una escala más baja (por lo tanto, en su caso, desea aumentar el tamaño en 5 y establecer la escala inicial en 0.2)

ACTUALIZAR

La razón por la que ignora la escala actual de lo que yo entiendo es porque no estás configurando JUSTAMENTE el traducir (ahora estoy buscando el CSS para ello). Cuando ejecuta -webkit-animation , está restableciendo todas sus transformaciones actuales (escala), por lo que debe asegurarse de tener sus escalas allí. Estoy buscando el CSS para cambiar, así que solo cambia la posición:

Answer 2

La mejor manera que encontré es esperar a que la animación esté completa, luego aplicar las transformaciones directamente al elemento y eliminar la clase de animación. Algo como esto funciona para mí, sin producir problemas técnicos:

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

Estoy usando una biblioteca diferente a jQuery, pero entiendes la idea.