animaciones CSS3 con transformación causa elementos borrosos en Webkit

Así que tengo algunos elementos nativos (div s) con varios efectos aplicados (border-radius, box-shadow y transform: scale()). Cuando los vivo, suceden dos cosas raras:animaciones CSS3 con transformación causa elementos borrosos en Webkit

Aunque no estoy tratando de animar la escala, si no pongo la escala en la animación, se ignora.
Cuando pongo 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 dará lugar a los problemas.

El primer problema también ocurre en Firefox, así que supongo que es porque así es como 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 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 estoy tratando de transformar el índice z como todo, y también he intentado las animaciones usando puramente translateY en lugar de translate.

Sucede en Chrome (18), Chrome Canary (20) y Safari (5.1.2 & 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.

Fuente

2012-05-02 Trolleymusic

Se ignora porque tanto la escala como la traducción son valores de la propiedad de transformación. Al animar, anula la transformación anterior, es decir, la escala. – mddw

Sí, eso creía. Supongo que así es como funciona la propiedad 'transform', es una pena que no puedas establecer individualmente las diferentes propiedades. EG: Puedo animar la opacidad de múltiples elementos con diferentes clases que tienen diferentes propiedades en ellos. – Trolleymusic

se refieren a esta respuesta en cuanto a por qué está borrando el elemento: https://stackoverflow.com/a/4847445/814647

Resumen de lo anterior: WebKit está tomando el original de tamaño/CSS antes de animar y tratándolo como una imagen, escalas ENTONCES arriba , produciendo la borrosidad.

Solución: Haga que el tamaño inicial sea el más grande y empiece inicialmente con una escala más baja (por lo que en su caso desea aumentar el tamaño en 5, y configure la escala inicial en 0,2)

ACTUALIZACIÓN

la razón no tiene en cuenta la escala actual de lo que entiendo es porque no se está fijando específicamente sólo el traducir (estoy mirando el CSS para ahora). Cuando ejecuta -webkit-animation, está restableciendo todas sus transformaciones actuales (escala), por lo que debe asegurarse de tener las básculas allí. Estoy buscando el CSS para cambiarlo, así que solo cambia la posición:

Fuente

2012-05-02 16:35:15

Gracias, sí, ya lo había visto, pero el problema es que en este ejemplo particular estoy configurando múltiples elementos que tendrán la misma estructura básica, colores y animación, pero diferentes escalas constantes. Así que el problema sigue siendo que necesitaría establecer cada uno con un tamaño inicial diferente o crear un muleiple Entonces, la cosa es que puedo escribir el elemento inicial como, por ejemplo, 400x400, y luego usar .big y .medium para escalar hasta 0.5/0.2 pero luego la animación anulará la configuración de la escala. Entonces, en este caso, también puedo establecer los tamaños en los elementos individuales en lugar de usar la escala. – Trolleymusic

Quería poder tener: 'div.circle.big',' div.circle.small', 'div.circle.whatever' y tener' .circle' configurado las propiedades básicas, '.big. small .whatever' configura los distintos tamaños, y para todos los '.circles' hereda la misma animación' translateY' ... – Trolleymusic

Pero no creo que eso sea posible ... – Trolleymusic

La mejor forma que encontré es esperar a que la animación se complete, luego aplicar las transformaciones directamente al elemento y eliminar la clase de animación. Algo como esto funciona para mí, que no produce 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 de jQuery, pero se entiende la idea.

Fuente

2013-07-07 16:40:38

animaciones CSS3 con transformación causa elementos borrosos en Webkit

Respuesta

Cuestiones relacionadas