Cómo realizar animaciones con css

En este tutorial vamos a ver como se pueden realizar animaciones web con CSS. Como algunos de vosotros habréis visto en Internet, algunas páginas web tienen efectos y animaciones muy vistosos. Generalmente usan Bootstrap y jQuery para realizar esos efectos.

Para seguir este tutorial online, se requiere cierto conocimiento de CSS, y de las propiedades básicas.

Como sugerencia, te recomiendo algunos libros de html, libros de css, libros de javascript y libros de Java que sirven para entrar en detalle en estas materias.

En este tutorial vamos a trabajar con CSS únicamente (sin ningún framework como Bootstrap o jQuery), para poder explicar las técnicas de animacián sólo con CSS. Las diferentes técnicas que vamos a usar serán las siguientes: transiciones, transformaciones, animaciones por frames, y (en un tutorial aparte gráficos vectoriales con SVG).

Como sugerencia, te recomiendo los libros de html, los libros de css y los libros de javascript que sirven para entrar en detalle en estas materias.

Recomendado Utiliza el editor css online de la parte inferior para ver cada uno de los ejemplos.

 También tienes disponible el código fuente del tutorial en GitHub por si quieres descargarlo.

Animaciones css con transiciones

Animar la propiedad color

En esta primera parte del tutorial vamos a hablar de las transiciones css, vamos a empezar por los colores, después vamos a usar las propiedades de posición (top y left) y por último vamos a usar la opacidad de un div.
Quizás el ejemplo más representativo de un cambio de colores sea la transición de color en el botón de una web. Por ejemplo vamos a mostrar un botón de descarga, el cual queremos enfatizar con un cambio de colores al pasar el ratón por encima. Se cambiará del azul al rojo mediante una transición de 1 segundo de duración.

Mira el Ejemplo 1.

Pulsa el botón para ver el resultado en el Visor CSS y luego interacciona con el botón del ejemplo.

Para realizar la animación del color, y en general cualquier tipo de animación, usaremos la propiedad CSS "transition: propiedad duración tipo de tiempo retraso".

Por defecto sino se especifica la propiedad se establecerá a "all".
Del mismo modo si no se especifica la propiedad tipo de tiempo ésta se ajusta a "ease", y si no se especifica el retraso su valor por defecto es 0.

Es posible animar más de una propiedad a la vez, para ello hay que poner cada propiedad separada por comas.
Si se usa la palabra "all" se animarán todas las propiedades (las que se puedan animar).

Hay que tener en cuenta que el ojo humano no es capaz de ver transiciones muy rápidas, por lo que es recomendable especificar un valor mínimo de medio segundo.

Otra cosa importante es que cada navegador no tiene exactamente el mismo tipo de código CSS para la transición, así que a veces tendremos que especificar código para un navegador concreto:

 para Chrome: -webkit-transition
 para Mozilla: -moz-transition
 para Internet Explorer: -ms-transition
 para Opera: -o-transition

Aunque no todas las propiedades necesitan prefijos. Es mejor revisar la especificación en la web para asegurarse. La web caniuse (en inglés) es un punto de referencia para saber la compatibilidad de cada navegador y de su versión.

Animar la propiedad position

Es muy común animar la posición de un elemento dentro de la página. Ya sea utilizando elementos "escondidos" o "visibles" que se deslizan de arriba a abajo o de izquierda a derecha.

Para ello vamos a coger el ejemplo anterior del botón y vamos a deslizar lateralmente un texto diferente al pasar por encima el ratón. El texto del botón cambiará el precio de 129 € a el literal Comprar.

Crearemos dos etiquetas span dentro del botón cada una con el texto inicial e final. Y el resto será crear los estilos correspondientes:

Mira el Ejemplo 2 para ver el código y luego haz click en .


Animar la propiedad opacity

La opacidad también es una propiedad que se puede animar. Un ejemplo típico sería animar la opacidad desde el 20-30% al 100% al pasar por un encima de una caja de información, por ejemplo los datos de un hotel en el cual podemos hacer la reserva online.

Mira el Ejemplo 3 para ver el código y luego haz click en para ver su resultado.


Con esto concluye la primera parte del tutorial de la serie de animaciones web con CSS
En la siguiente parte hablaremos sobre las transformaciones de los elementos de la página. 

Animaciones css con transformaciones

En esta segunda parte del tutorial vamos a hablar de las traslaciones, rotaciones, escalados, y sesgados en el plano de dos dimensiones con CSS.

Las rotaciones

La sintaxis es sencilla "transform: rotate (grados)".
Los grados van de 0deg a 360deg para dar una vuelta completa. O también se puede especificar "1turn", que es una vuelta completa también. 
Aunque podemos especificar más de 360deg para girar más grados. Incluso podemos girar hacia el otro sentido poniendo el signo "-" delante de los grados. 
Es decir, giramos en el sentido de las agujas del reloj con 15deg, y en el sentido inverso a las agujas del reloj con -15deg.

Pero para poder ver una rotación en un div, tenemos que incluir una transición de transformaciones en la definición de la clase. Esto es con "transition: transform 3s;"

 

Las traslaciones y los escalados


La sintaxis es "transform: scale(factor);"
Donde el factor es un número que indica el porcentaje, por ejemplo 0.5 sería el 50%, y 2 sería el 200%.

También se puede escalar independientemente en la dirección x, o en la dirección y.
Esto se realiza con "transform: scale (factor_x, factor_y);"

O de modo separado se puede realizar con:
"transform: scaleX(factor);"
"transform: scaleY(factor);"

Hay que destacar que aunque escalemos un objeto, su modelo de caja que lo contiene no varía, y eso nos puede dar la sensación que se mueve al escalarlo, porque se hace más pequeño o más grande. 
Depende de donde se ubique el origen de la transformación. Bien puede ser en el centro o en una esquina.
Esto se puede controlar con "transform-origin: center left (o en píxeles)".

Para mover un elemento de un sitio a otro ciertos píxeles la sintaxis es:
"transform: translateX(5px);" para moverlo en la dirección x
"transform: translateY(5px);" para moverlo en la dirección y

Si no especificamos X o Y, lo moverá en ambas direcciones.
"transform: translate(5px);"

Se pueden anidar varias transformaciones una detrás de la otra y no hacen falta comas.
Por ejemplo: "transform: rotate(100deg) translateX(4px);"

Los sesgados

Esta transformación no creo que se utilice mucho en las páginas web habituales. 
Consiste en deformar el objeto un cierto ángulo en la dirección X o en la Y. 
Para realizarlo se utiliza la sintaxis: "transform: skew(angX,angY);"
O para hacerlo independiente para cada dirección:
"transform: skewX(ang);"
"transform: skewY(ang);"

Para poder ver en práctica estos conceptos hemos puesto un ejemplo que contiene todas esas transformaciones. 

El primero trozo es una imagen de una rueda de coche. Al mover el ratón por encima de la imagen, se mueve rodando hacia la derecha. 
También hemos añadido una pequeña deformación con la transformación de sesgado.

El segundo trozo es una serie de tres imágenes de un álbum de fotos abstractas. Al mover el ratón por encima de la foto, se gira, se escala y se traslada unos pocos píxeles.

Mira el Ejemplo 4 para ver el código y haz click en para ver el resultado.

Animaciones css con keyframes

En este tutorial hablaremos de la animación css con keyframes.
Los keyframes nos proporcionan un guión de como, cuando y que propiedades cambian a lo largo del tiempo de una animación.

Para definir una animación con keyframes se utiliza la sintaxis @keyframes con corchetes y dentro se especifican los pasos basados en porcentajes, 0%, 50%, 80%, 100% que definen el guión de la animación. 
El 0% es el principio y el 100% el final.
También se puede usar la palabra from (que equivale a 0%) y to (equivale a 100%).

Estas definiciones se pueden reutilizar luego en otros elementos de la página para que tengan el mismo tipo de animación también.

Habitualmente primero se define una animación y luego se le asigna a un identificador de objeto mediante la palabra animation.

@keyframes nombre{
   parte 1 {propiedad: valor;}
    parte 2 {propiedad: valor;}
   parte 3 {propiedad: valor;}
   etc...
}

#id_obj{
  transform-origin: left center;
  animation: nombre duracion retraso iteraciones velocidad;
}

#id_obj2{
  transform-origin: left center;
  animation: nombre duracion retraso iteraciones velocidad;
}

Si hay código en la animación que se repite, se puede escribir de esta forma:

   parte 1, parte 2, parte3 {propiedad: valor;}
   parte 4 {propiedad: valor;}
   

Por ejemplo podemos definir una animación (que tarde 1 segundo) que llamaremos "aparecer" y que cambie la opacidad desde 0 (invisible) a 1 (visible):

@keyframes aparecer{
   from {opacity: 0; visibility: hidden;}
    to {opacity: 1; visibility: visible;} 
}

#id_obj {
  animation: aparecer 1s;
}


El problema en este ejemplo es que cuando acabe la animación volverá al estado inicial. Y nos gustaría que se quedara en el estado final. Para eso tenemos que añadir la palabra "forwards". Es lo que se llama "fill-mode" y especifica si se mantienen los estilos de antes o de después de la animación.

#id_obj {
  animation: aparecer 1s forwards;
}


Tal como vemos en la sintaxis hay que especificar un nombre y una duración:

animation: nombre duracion retraso iteraciones velocidad;


Opcionalmente se puede definir un "retraso" en segundos a la hora de iniciar la animación. 

También se puede definir el total de iteraciones, que es el número de veces que se repite la animación. Se puede poner un número o la palabra "infinite".

La velocidad es una función que varía con el tiempo que define la curva de velocidad de la animación. 
Es decir, si la animación es lineal, o se acelera al principio, o al final, o en la mitad.
Estos son los valores habituales:

  • linear. Tiene la misma velocidad de principio a fin.
  • ease. Empieza lento, luego se acelera y luego acaba lento.
  • ease-in. Empieza lento.
  • ease-out. Acaba lento.
  • ease-in-out. Empieza y acaba lento.

Otra característica importante es que se puede definir una curva de Bezier para esta función de tiempo, de tal modo que podamos realizar animaciones a medida que no sean lineales, para generar "rebotes", "acelerones", y efectos de un modo más realista.

Para poner un ejemplo de keyframes vamos definir una animación que simule un desplazamiento horizontal de izquierda a derecha con una opacidad progresiva de 0 a 1 y que luego rebote y gire un poquito. 

La idea es realizar una animación de un formulario de suscripción a una newsletter o un blog.
Seguro que podemos recordar algo similar en muchas webs con formularios modales de suscripción a newsletters.

Mira el Ejemplo 5 para mostrar el código y haz click en para ver el resultado.

 

Loading spinners

En este apartado mostraremos una pequeña muestra de loading spinners. Se realizan completamente con código CSS a partir de transiciones, transformaciones y keyframes.
Los loaders nos proporcionan información de que se está cargando o realizando un trabajo de fondo en la página web mediante una pequeña animación que dura un tiempo infinito.

Para definir un loader primer usamos css y luego keyframes que definen el guión de la animación. 

Por ejemplo es muy típico observar loaders de círculos rodando, o de una barra desplazandose de izquierda a derecha. Estas animaciones duran unos pocos segundos 2-4 y se repiten indefinidamente.


Mira el Ejemplo 6 para mostrar el código y haz click en para ver el resultado en el visor de la derecha.

 

Conclusión

Las etiquetas css que se han descrito en los apartados anteriores nos permiten controlar varios aspectos de una animación css, podemos realizar transiciones de las propiedades, transformaciones, o animaciones formando un gui�n de cambios de las propiedades. Este tutorial muestra una introducción para poder empezar a crear tus propias animaciones. De todos modos, es recomendable continuar con el aprendizaje del lenguaje Javascript y el CSS3 en detalle.


Y si quieres conocer tutoriales promocionados, no te pierdas estos cursos con descuentos increibles. También puedes recibir nuestro boletín por correo,

Si te gusta este tutorial, puedes contribuir anónimamente con unos tokens BAT.
No conoces Brave? el navegador web que permite navegar más rápido y respetando tu privacidad.

Editor de CSS