Ya sabíamos que el desarrollo web con Flash era una moda que no iba a durar mucho tiempo, ya que crear páginas webs con este código suponía una mala orientación para el posicionamiento, la visibilidad en diferentes dispositivos, etc.
La principal razón por la que se utilizaba Flash era por la sorprendente sensación que podíamos dar a nuestros usuarios con infinidad de movimientos, transiciones y animaciones que éste nos permitía.
Con la llegada CSS3 tenemos a nuestra disposición métodos que nos permiten crear el mismo efecto y hoy os voy a enseñar cómo hacerlo.
La sintaxis para crear una animación es la siguiente:
No te olvides, para que funcione en todos los navegadores debes añadir sus prefijos correspondientes:
La propiedad puede ser all para indicar que cualquier propiedad sea animada. O también utilizar una determinada propiedad como por ejemplo background-color.
Ojo, no todas las propiedades pueden ser animadas, más abajo te dejo una lista de las propiedades que pueden serlo.
La duración se mide en segundos o milisegundos, por ejemplo 1s sería un segundo y 0.3s serían 300 milisegundos.
El tipo de movimiento indica el efecto, la velocidad que tendrá la animación. Algunas son linear, ease, ease-in, ease-out, etc. A continuación te dejo un ejemplo, pasa el ratón por encima para ver el resultado.
El tiempo que le damos de espera a la animación, se mide en segundos o milisegundos:
Bien, vamos con un ejemplo. Digamos que tenemos el siguiente elemento:
Con su estilo css:
En prinicpio ya lo tenemos, pero ¿y la animación?, la animación ocurrirá cuando el valor de una propiedad cambie, por ejemplo vamos a hacer que cuando el cursor esté por encima del elemento se vuelva más ancho.
¿Sencillo verdad? Pues al igual que con el ancho, puedes hacer animaciones con colores, alturas, escalas, rotaciones, etc.
