Primeros pasos con las animaciones en CSS

12-01-2015 - Andrés Cruz

En esta nueva entrada sobre CSS daremos los primero pasos con las Animaciones en CSS; veremos como los @keyframes de CSS son fundamentales para las Animaciones, como animar nuestros elementos en CSS y algunas comparaciones entre las Animaciones y las Transiciones en CSS.

Animaciones vs Transiciones en CSS

Las Transiciones en CSS

Recordando un poco sobre las Transiciones en CSS son cambios suaves entre un estado a otro en un intervalo de tiempo determinado; por ejemplo pasar de un color rojo a azul en cuatro segundos:

Transición de colores

(Posiciona el cursor encima)

Fácilmente podríamos cambiar de un color a otro con JavaScript o jQuery accediendo directamente al valor de la propiedad backgroud y cambiando el color por otro; pero esto no son Transiciones ya que son cambios bruscos de un estado a otro.

Las Animaciones en CSS

Dos bloques componen las Animaciones en CSS:

Sin ambos componentes trabajando en conjunto no es posible realizar una Animación en CSS.

Al igual que las Transiciones en CSS las Animaciones actúan directamente sobre las propiedades del elemento HTML en cuestión en un intervalo de tiempo determinado para cambiar de un estado a otro; sin embargo con las Animaciones podemos tener un control bastante más preciso en el cambio en las propiedades de los elementos HTML.

Empezando con las Animaciones en CSS

Veamos una Animación de lo más sencilla para comenzar a entenderlas un poco; por ahora solo nos enfocaremos los @keyframes que permiten crear frames para definir cada una de los estados de las Animaciones; aunque solamente con ellas no es posible hacer funcionar una Animación.

Esta Animación permite cambiar el color de fondo (backgroud) de un elemento; en este caso de un contenedor -div-:

	@keyframes cambiarColorFondo {   
	     from { background: red;}   
	     to   { background: blue;} 
	}

Obteniendo la siguiente Animación en CSS:

Animaciones de colores

También tendríamos el mismo resultado en la Animación si la estructuramos de la siguiente manera:

@keyframes cambiarColor {   
     0%   { background-color: red;}   
     100% { background-color: blue;}  
  }

Explicación del CSS anterior…

Empleando los porcentajes en lugar de los valores from{} (para un desplazamiento inicial de 0%) y to{} (para un desplazamiento final del 100%) es posible personalizar más los frames dados a través de estos porcentajes y esta es una de las ventajas que traen las Animaciones con respectos a las Transiciones; si tenemos configuradas las siguientes reglas en el @keyframes:

          @keyframes cambiarColor {   
            0% {
                background: #FF0000; 
                width:50%
            }
            25% {
                background: #FFAAAA;
                width:80%;
            }
            50% {
                -webkit-box-shadow:inset 0px 0px 0px 10px #BB0000;
                -moz-box-shadow:inset 0px 0px 0px 10px #BB0000;
                box-shadow:inset 0px 0px 0px 10px #BB0000; 
                border-radius:200px 
            }
            75% {
                width:120px;
            }
            100% {
                background: #FF0000; 
                width:50%
            }
            }

Explicación del CSS anterior…

Realizar el equivalente del ejemplo presentado anteriormente en Transiciones sería todo un reto.

Como podrás darte cuenta al poder acceder en intervalos de tiempo constante para modificar las propiedades resulta en algo bastante útil; es decir; en base al ejemplo anterior, en donde el tiempo global de la Animación son 8 segundos (el tiempo de las Animaciones es definido a través de las propiedades en la siguiente sección), vemos que el segundo valor de la propiedad es de un 25% lo que indica que se establecerán por completo los valores de las propiedades en el rango de 0 a 2 segundos de manera progresiva; es decir, cambiarán el color background y la anchura del contenedor de fondo (width) en el tiempo mencionada anteriormente; la misma lógica se aplica al resto de los porcentajes:

Los @keyframes esenciales para la creación de las Animaciones en CSS

Los @keyframes no son más que reglas que indican cómo será el comportamiento de los distintos frames o cuadros de toda la Animación y son el corazón de las Animaciones; Mozilla Developer Network los define como:

La regla arroba @keyframes permite a los autores controlar los pasos intermedios en una secuencia de Animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de Animación que debe ser alcanzado por determinados puntos durante la Animación.

Propiedades de las Animaciones en CSS

Ya tenemos creada la Animación; sin embargo, empleando solamente con la regla anterior no es posible hacer funcionar la Animación; falta indicar el comportamiento y personalización de las Animaciones, para esto utilizamos varias propiedades las cuales explicaremos a continuación en la siguiente tabla:

animation-name Debe de indicar aquí nombre de la Animación; en otras palabras del @keyframes.
animation-duration Como podrás imaginarte, aquí debes de indicar la duración que tendrá la Animación en segundos (s) o en milisegundos (ms).

Ejemplo de Animaciones vs Transiciones y algo más

Podemos ver una comparativa entre las Animaciones, Transiciones y sin emplear Transiciones y Animaciones; ubica el cursor por encima de cualquiera de los contenedores div:

Además existen muchas otras propiedades que permiten personalizar aún más el comportamiento final de las Animaciones en CSS las cuales son y serán tratadas en siguientes entradas:

animation-iteration-count Especifica el número de veces que la Animación se va a ejecutar; los posibles valores son:
  • #: Especifica el número de iteraciones o ciclos.
  • infinite: Se ejecutará infinitamente.
  • inherit: Obtiene el valor del padre.
  • initial: Establece la propiedad con el valor por defecto.
animation-direction Especifica la dirección de la Animación.
animation-delay Especifica un tiempo dado es segundos para iniciar la Animación.
animation-timing-function Especifica la curva de velocidad de la Animación.

Tambien puedes visitar la documentación oficial ofrecida por la w3schools para validar toda la información y ver otra información como la comatibilidad con los navegadores; recuerda emplear los prefijos como -moz- y/o webkit-, entre otros para mantener la compatibilidad entre los distintos navegadores.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 4 días!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!