Con las animaciones y transformaciones CSS podemos crear diseños mucho más atractivos y efectistas dándole a nuestro diseños web un toque más dinámico. Las animaciones y transformaciones en CSS, también nos ofrecen la ventaja de poder crear efectos con un buen renderizado sin necesidad de utilizar javascript. Pero no son compatibles con todos los navegadores. Afortunadamente con los más modernos si.

¿Qué navegadores soportan animaciones y transformaciones CSS?

Soporte Animaciones CSS

Según la web https://caniuse.com/ el 93.4% de los navegadores actuales soportan la propiedad animation de CSS. Y un 81.63% sin utilizar prefijos. Más tarde te explicaré que quiere decir esto.

Te recomiendo esta web, en ella puedes buscar cualquier propiedad de CSS y HTML entre otros para comprobar en que navegadores se puede utilizar.

Resumiendo la imagen podemos ver que las animaciones y transiciones CSS se soportan en todos los navegadores actuales, tanto para escritorio como para móviles: Chrome, Safari, Edge, Firefox, etc… A excepción de Opera Mini e Internet Explorer 8 y 9.

Prefijos para animation css

Volviendo al tema de los prefijos, debes de saber que la propiedad animation como otras muchas de CSS no son compatibles con algunos navegadores si no utilizamos prefijos en CSS. Aquí te dejo el listado de prefijos y los navegadores a los que afectan.

Soporte para transformaciones en CSS

En el caso de las transformaciones, debes saber que son soportadas en la mayoría de navegadores modernos. Con Internet explorer son compatibles a partir de la versión 10. Pero tanto Internet Explorer 10, 11 como Edge no soportan las transformaciones en objetos SVG.

¿Qué sucede con las animaciones y transformaciones CSS en Internet explorer 8 y 9?

Personalmente, en la mayoría de los proyectos que he trabajado últimamente he dejado de preocuparme por Internet Explorer 8 y 9. Nunca he recibido ninguna queja de ningún cliente ni me ha llegado tampoco ninguna queja por parte de los usuarios. Internet explorer 8 y 9 suponen un porcentaje residual. En las páginas que gestiono, los porcentajes de visita desde Internet explorer 8 y 9 van de un 0% a un 0.28%. Entiendo que este porcentaje para un portal como Google o Amazon pueden ser muchas visitas pero en el caso de una web corporativa no.

Pero es una decisión que debes tomarla tú.

Además siempre podemos cargar una hoja de estilos que sólo afecte a estos navegadores con los comentarios condicionales en el head de nuestro documento HTML. En este caso estaríamos cargando una hoja de estilos especificas para todos los navegadores inferiores a Internet Explorer 10.

Espero que te haya gustado el contenido. Por último te animo a comentar. ¿Utilizas animaciones en tus proyectos webs? ¿Das soporte a IE9 y 8?