transicion - transition css hover

¿Cuál es la combinación correcta de prefijos para las transiciones y transformaciones de CSS? (3)

A partir de ahora, si está admitiendo las dos versiones más recientes de cada navegador, aquí están los prefijos que necesita:

-webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; -webkit-transform: rotateX(-30deg); transform: rotateX(-30deg);

Entonces, para responder a su pregunta, sí, la transición de prefijo debe apuntar a la transformación de prefijo. Bastante seguro de que siempre es cierto para las transformaciones (aunque no necesariamente para otras propiedades. Flexbox y Gradients pueden ser complejos en cuanto a prefijos, le sugiero que use github.com/postcss/autoprefixer para mantener esas reglas github.com/postcss/autoprefixer ).

Además, mi forma favorita de resolver este tipo de pregunta es ir a un nuevo Pen en CodePen , activar Autoprefixer en la configuración de CSS, pegar mi código y compilarlo. Autoprefixer agrega automáticamente prefijos para los dos primeros lugares de cada navegador. Un poco mágico!

¿Cuál sería la forma correcta de prefijar este CSS para cubrir la gama más amplia de navegadores y versiones?

Versión 1:

-webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out; transition: transform .3s ease-in-out; -webkit-transform: rotateX(-30deg); -moz-transform: rotateX(-30deg); -ms-transform: rotateX(-30deg); -o-transform: rotateX(-30deg); transform: rotateX(-30deg);

O la versión 2:

-webkit-transition: transform .3s ease-in-out; -moz-transition: transform .3s ease-in-out; -ms-transition: transform .3s ease-in-out; -o-transition: transform .3s ease-in-out; transition transform .3s ease-in-out; -webkit-transform: rotateX(-30deg); -moz-transform: rotateX(-30deg); -ms-transform: rotateX(-30deg); -o-transform: rotateX(-30deg); transform: rotateX(-30deg);

Me parece que cuando utilizo prefijos de proveedor en una propiedad de transición, también debo apuntar al atributo prefijado del proveedor al que quiero hacer la transición.

Realmente no puedo encontrar ningún cierre a esto.

Como mencioné en una pregunta muy similar ...

Este es uno de esos casos en los que los prefijos de los proveedores para las funciones estandarizadas se vuelven extremadamente problemáticos, porque debe tener en cuenta todas las diferentes implementaciones prefijadas y / o no prefijadas de diferentes funciones en diferentes versiones de diferentes navegadores.
Qué bocado. Y luego tienes que combinar varias permutaciones de estos. Qué puñado .
En resumen, debe averiguar qué versiones de cada navegador requieren un prefijo para cada una de las propiedades individuales y, a menos que no le importe la cantidad, deberá aplicar los prefijos de manera diferente para los navegadores individuales.

La pregunta vinculada se refiere a animaciones en lugar de transiciones que dan como resultado notaciones significativamente diferentes, pero ambas características pasaron por procesos AFAIK similares de no prefijación. Dicho esto, aquí están las tablas de compatibilidad de caniuse.com para transformaciones 2D y transitions .

En otras palabras, el hecho de que una característica tenga un prefijo en una versión de un navegador no significa que la otra característica necesariamente tenga también un prefijo en la misma versión del mismo navegador. Por ejemplo, Chrome no prefigura las transiciones al menos diez versiones principales (26) antes de no prefijar las transformaciones (36), y Safari aún requiere prefijos para las transformaciones. Como resultado, definitivamente vas a tener que tener esta declaración:

transition: -webkit-transform .3s ease-in-out;

Y si es absolutamente necesario, deberá cubrir versiones aún más antiguas con lo siguiente:

-webkit-transition: -webkit-transform .3s ease-in-out;

Otros navegadores, milagrosamente, pudieron quitar el prefijo tanto de las transiciones como de las transformaciones (así como las animaciones) simultáneamente, lo que hace las cosas mucho más fáciles:

-ms-transition solo se usa en las versiones preliminares de IE10, que han caducado hace mucho tiempo. Ninguna otra versión de IE usa transiciones prefijadas, por lo que debe eliminar ese prefijo de transición en particular.
-ms-transform con el prefijo solo es usado por IE9; IE10 y posteriores se envían con transformaciones sin prefijo. Pero a los efectos de la degradación elegante, es posible que desee mantener su -ms-transform: rotateX(-30deg); declaración: solo tenga en cuenta que no se puede realizar la transición ya que IE9 no admite transiciones o animaciones CSS.
Firefox usó -moz-transition y -moz-transform hasta 15 inclusive, y luego no se fijó en 16.
-o-transition y -o-transform fueron utilizadas por Opera hasta las 12.00 inclusive, luego no se fijaron en 12.10, luego se re-prefijaron como -webkit- en versiones posteriores en su movimiento a Blink.

En resumen, aquí están todos los prefijos que necesita, basados en la información proporcionada por caniuse.com (que confío en ser actual y precisa en su mayor parte):

-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */ -moz-transition: -moz-transform .3s ease-in-out; /* Firefox < 16 */ -o-transition: -o-transform .3s ease-in-out; /* Opera < 12.10 */ transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */ transition: transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */ -webkit-transform: rotateX(-30deg); -moz-transform: rotateX(-30deg); -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */ -o-transform: rotateX(-30deg); transform: rotateX(-30deg);

Lo mínimo que necesitará para ser compatible con la última versión de cada navegador al momento de escribir este documento es:

transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */ transition: transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */ -webkit-transform: rotateX(-30deg); transform: rotateX(-30deg);

Como se mencionó en los comentarios, puede usar una herramienta como github.com/postcss/autoprefixer para automatizar esto en función del nivel de soporte de navegador que necesite. Sin embargo, para aquellos que prefieren escribir su CSS manualmente, o para aquellos que simplemente se preguntan qué prefijos se necesitan para cada navegador, eso es todo.

En una nota final: ¿observa las dos declaraciones de transition prefijo en los ejemplos anteriores? Ahora, usted pensaría que sería bastante fácil simplemente combinarlos en una sola declaración como esta:

transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;

Pero, desafortunadamente, Chrome ignorará completamente por completo esta declaración , mientras que otros navegadores la aplicarán bien.

En última instancia, es una tontería hacer que la carga de su página web sea más lenta solo para tener soporte para versiones anteriores de los navegadores de actualización automática. Y, para IE, el prefijo ms para animaciones solo se usa en versiones preliminares. Por lo tanto, todo lo que cualquier persona razonable necesita es solo soporte para la transformación de webkiting para Safari.

transition: transform .3s ease-in-out; /*you can put -webkit-transform below, but that will only waste space*/ transition: -webkit-transform .3s ease-in-out; transform: rotateX(-30deg); -webkit-transform: rotateX(-30deg);

Y Voilà: tiene la misma compatibilidad con IE que todos esos prefijos pesados, al tiempo que mantiene la compatibilidad con la última versión de los navegadores de actualización automática. Si realmente cree que es necesario brindar soporte a ese .001% de las personas que siguen retrasando las actualizaciones de su navegador, simplemente coloque un pequeño mensaje en la parte inferior de la pantalla que le indica al usuario que haga clic en el botón de actualización en su navegador si la página no se muestra correctamente.