Animación en CSS3 – Keyframes

0
10

Como es ya conocido por muchos desarrolladores las animaciones web antes eran creadas con el programa Adobe Flash. Con este se podían crear animaciones espectaculares con mucho dinamismo e incluso sitios web completos haciendo uso de esta tecnología.

Con el tiempo la tecnología Flash ha caido en desuso y gracias a HTML 5,  CSS 3 y Javascript, podemos crear este tipo de animaciones de excelente calidad sin necesidad de instalar ningun complemento en nuestro navegador.

Las Keyframes en CSS nos permiten añadir animación a los diferentes elementos de un sitio web.

Compatibilidad con Navegadores Web

A día de hoy practicamente todos los navegadores modernos tienen soporte para las nuevas funciones de CSS 3, pero en algunos casos tendremos con añadir algunos prefijos para maximizar esta compatiblidad.

Prefijos más usados:

-o-               : Añade compatibilidad para los siguientes navegadores: Opera 

-moz-         : Añade compatibilidad para los siguientes navegadores: Mozilla Firefox

-webkit-    : Añade compatibilidad para los siguientes navegadores: Chrome, Safari, Android, iOs

-ms-            : Añade compatibilidad para los siguientes navegadores: Microsoft Internet Explorer

Como se puede apreciar en el siguiente ejemplo

div {

-o-transition: all 2s ease;

-moz-transition: all 2s ease;

-webkit-transition: all 2s ease;

transition: all 2s ease;
}

Dejar respuesta


*