soy Kseso y esto EsCSS

Fallo de IE10 con Animation y @keyframes css en @media queries

Descripción del fallo de IE10 al concurrir una animación Css con las @keyframes declaradas dentro de reglas @media queries y cómo solucionarlo.

Fallo de IE10 con Animation y @keyframes css en @media queries

·Por Kseso ✎ 5

Fallo de IE10 con Animation css en @media queriesPlanteando el escenario: tengamos una animación Css construida con sus correspondientes @keyframes y por aquello del las particularidades del proyecto sólo sea necesario emplearla en un determinado tamaño de pantalla.

Para esto último, discriminar por viewport, tenemos disponibles y usamos la @media queries correspondientes para poner dentro de ella tanto la declaración 'animation' con su valor como la regla '@keyframe'.

Y aquí surge la sorpresa, desagradable y frustante. Mientras en cualquier otro navegador (cuya versión de soporte a éstas) la animación funciona perfectamente bien, en IE10 falla la animación Css. Recuerda que IE10 sí soporta las 'animation', @keyframes y @medias queries de Css.

Pongamos en código lo anterior para que puedas hacer tus pruebas y si consideras oportuno dejar tus impresiones en un comentario.

html {background:#444;} @media only screen and (min-width: 600px) { html {animation: colorize 5s infinite;} @keyframes colorize { 0% {background: #FF7361;} 100% {background: #16a085;} }/*fin de la Keyframes*/ }/*fin de la @media query*/

Sencillo: mostramos el fondo del html en color '#444' en los viewports menores de 600px y el los mayores aplicamos la animación 'colorize' que alterna entre '#FF7361' y '#16a085'

Puedes verlo en el pen que incluyo justo debajo

See the Pen IFKmB by Kseso (@Kseso) on CodePen

Ver Demo

Solucción al fallo de IE10 con animation en @media queries

En los distintos sitios de Micro$oft no he podido encontrar nada al respecto.

Buscando información sobre este fallo de IE10 cuando concurren juntas encontré este hilo en los foros de Css-tricks.

En él, el usuario ToxicFire propone como solución a este bug de IE10 escribir la regla '@keyframes' fuera de toda regla @media query, incluyendo sólo en la @media correspondiente la declaración 'animation: valor'.

Así, tomando como ejemplo el código anterior, el css para que funcione en IE10 la animación en función de las @media queries oportunas quedaría así:

html {background:#444;} @keyframes colorize { 0% {background: #FF7361;} 100% {background: #16a085;} } @media only screen and (min-width: 600px) { html {animation: colorize 5s infinite;} }

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso