¿Qué son las animaciones en css3?

Las hojas de estilo (CSS) para los que no sepan definirlo de manera fácil, es un archivo que se encarga de dar colores, tamaños y estructura a nuestras páginas webs. Esta nueva evolución de animaciones con css3 nos permiten dar movimiento a cualquier elemento en nuestra web, es decir podemos hacer que por ejemplo una capa (div), un texto o una tabla tengan movimiento y al entrar en la web veamos texto apareciendo, algún elemento rotando o al pasar por encima con el ratón de una capa que gire o cambie de tamaño.

Desde que flash no es compatible con los dispositivos móviles el css3 ha cobrado mucha más importancia, ya que actualmente la gente cada vez entra más en internet con sus dispositivos, y gracias a las animaciones CSS podemos seguir disfrutando de movimiento y animaciones en nuestras pequeñas pantallas sin la necesidad de cargar archivos de gran tamaño para ello, como por ejemplo antes cuando utilizábamos flash.

Como hacer animaciones en html5 y css3

En internet hay infinidad de ejemplos de cómo animar nuestros elementos web y cada maquetador o programador querrá animar la parte o elemento que necesite asi que lo mejor es adentrarse en la red y buscar que necesitamos, es decir si por ejemplo queremos hacer que un texto se deslice por la ventana del navegador, el código sería:

animaciones css3 avanzadas

p {

animation-duration: 3s;

animation-name: slidein;

}

@keyframes slidein {

from {

margin-left: 100%;

width: 300%

}

to {

margin-left: 0%;

width: 100%;

}

}

¿Qué tipo de animaciones podemos hacer? Animaciones css3 avanzadas

Crear loops o efectos de transición, de escalado, transformaciones y rotaciones que harán que tu web se vea más dinámica, elegante y que esta animación ocupe muy poco. Las animaciones se logran gracias a la función “animation” y sus distintas propiedades con las cuales nos dan la posibilidad de configurar la duración, el ritmo y otras características.

¿Qué navegadores leen las animaciones en css3 y html5?

Pues como es normal los navegadores muy antiguos no leerán estos nuevos códigos, pero en la actualidad la mayoría de la gente podrá ver las animaciones ya que por lo menos por seguridad los sistemas operativos y navegadores suelen actualizarse para no tener problemas, dejamos una tabla comparativa donde se ve claramente desde que versión son compatibles.

tabla

Leave a Reply

Your email address will not be published. Required fields are marked