OmbuShop Crea Tu Tienda Online

Animaciones CSS3

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

El uso de animaciones CSS3 no es una novedad. Sin embargo, es una herramienta indispensable para ampliar las barreras del diseño estático y realizar propuestas más dinámicas para tus clientes o cualquier proyecto de diseño web.
En este post, vamos a repasar las reglas generales y algunos ejemplos. Para empezar, sólo es necesario tener algunos conocimientos básicos de HTML y CSS.

Animaciones CSS3

Las animaciones nos permiten modificar el estilo de algunos elementos de HTML a través de transiciones en una duración determinada. Estas transiciones se definen por medio de keyframes y las propiedades de la animación asignadas al elemento.

Keyframes

En la propiedad @keyframes se define el nombre de la animación junto a las transiciones de la misma. En este ejemplo, hay 3 momentos para la animación color y están afectando la propiedad background-color del elemento div.

Propiedades de la animación

Para animar un elemento, se utiliza la propiedad animation, la cual tiene estas subpropiedades:

  • animation-name: nombre de la animación.
  • animation-duration: duración de la animación en segundos o milisegundos.
  • animation-timing-function: define la curva de velocidad de la animación. Esta subpropiedad cuenta con diferentes opciones:
    • linear: mantiene la misma velocidad a los largo de toda la animación
    • ease:tiene un comienzo lento, luego la velocidad aumenta y vuelve a ser lenta hacia el final
    • ease-in:tiene un comienzo lento y luego mantiene la velocidad.
    • ease-out:mantiene la misma velocidad y luego es lenta hacia el final
    • ease-in-out:el comienzo y el final de la animación son lentos
    • cubic-bezier: la velocidad se define a partir de la función cúbica de Bezier. Acepta cuatro valores entre 0 y 1.
  • animation-delay: es el tiempo de retraso para comenzar la animación. Se define en segundos o milisegundos.
  • animation-iteration-count: es la cantidad de veces en que se repite una animación. También se puede utilizar infinite.
  • animation-direction: es la dirección de la animación. Puede ser linear, reverse, alternate-reverse

En el siguiente ejemplo se puede observar cómo un mismo elemento varía su animación según su animation-timing-function:


 

La propiedad transform

Para crear transiciones de espacio en una animación, se utiliza la propiedad transform. De esta manera se puede rotar, trasladar, escalar o sesgar un elemento. Para más información sobre su sintáxis y uso, recomiendo leer esta guía.

Sobre el soporte y uso de animaciones

Las animaciones CSS3 tienen soporte en la mayoría de los navegadores en sus últimas versiones. Aún así, te recomiendo que utilices los prefijos estandarizados de WebKit.

Screenshot 2016-01-14 10.51.46

No hay límites sobre el uso de animaciones, pero el uso excesivo en todo el sitio o varias animaciones con loop infinito pueden generar problemas de rendimiento. Te recomiendo que antes de comenzar a animar, evalúes qué elementos necesitan ser animados, por qué y cómo van a mejorar la interacción con el usuario para proponer una nueva experiencia.

Otros Artículos

Para profundizar en el tema, recomiendo leer estos artículos. Algunos son más técnicos que otros, pero sin dudas te ayudarán a mejorar tus habilidades con las animaciones CSS3: