Cómo crear animaciones y transiciones con CSS

5min

Gracias a las animaciones de carga, los usuarios saben que una página web está esperando para recibir respuesta del servidor. De no existir este tipo de animaciones y demorarse la visualización de la página, el visitante podría pensar que el sitio no responde o que está bloqueado cuando la realidad es que tarda  en responder. Las animaciones de carga son una interfaz básica en muchos sitios actuales, principalmente cuando se realiza la carga de contenido de manera asíncrona, lo que conocemos comúnmente por Ajax.

Existen muchos medios para incorporar mensajes de carga, desde un simple texto hasta una imagen, pero la mejor manera de conseguirlos es por medio de animaciones CSS.

Índice

¿Por qué usar animaciones CSS?

Lejos está el tiempo en el que las animaciones de carga debían ser incorporados mediante gifs animados. Actualmente las animaciones CSS están soportadas por todos los navegadores, por lo que son un medio también ideal, que además tiene diversas ventajas:

  • Pesan poco.
  • Son personalizables, en tamaños, velocidad o color.
  • Podemos aplicarla en muchos casos usando una simple clase CSS.

¿Qué tipos de animaciones CSS existen?

Existen dos vertientes fundamentales en lo que respecta a animación CSS:

  • Transiciones: En ellas podemos indicar qué propiedades de CSS deben cambiar de manera suavizada, produciendo la animación.
  • Animaciones: Cambiar de manera automática las propiedades de los elementos, para que varíen de manera suavizada con el tiempo en una secuencia totalmente configurable.

Aunque sean más simples, las transiciones son mucho más utilizadas, ya que nos permiten realizar animaciones de manera rápida y sencilla, de modo que se produzcan diversos efectos estéticos, a medida que los valores de las propiedades CSS cambian. Las animaciones son por su parte mucho más potentes, ya que nos permiten cambiar varias propiedades de CSS de manera suavizada, desde el propio código de las hojas de estilo.

Cómo realizar transiciones CSS

Veamos ahora cómo realizar una animación CSS mediante una sencilla transición entre sus propiedades. Para ello usamos el atributo CSS «transition», al que le indicamos los siguientes valores:

  • La propiedad CSS que queremos que tenga una transición suavizada de sus cambios.
  • El tiempo que dura la transición.
  • La función de transformación, que calcula la progresión de valores para la transición a lo largo del tiempo. Puede ser algo como ease, ease-in, linear, etc…

Un ejemplo sencillo donde aplicar una transición sería el efecto «hover», para que cambien los valores de una propiedad CSS cuando pasamos el ratón por encima. Podríamos conseguir una transición suavizada del color de fondo con un CSS como el siguiente:

.efecto_hover {
  padding: 10px;
  background-color: #ddd;
  transition: background-color 0.5s ease-in;
}
.efecto_hover:hover {
  background-color: #fdd;
}

Cómo realizar animaciones CSS

Para producir una potente animación CSS tenemos que incorporar otra serie de atributos y valores CSS. Gracias a las animaciones podemos conseguir que cambien cualquier número de propiedades y establecer de manera precisa diversos estados por los que debe pasar la secuencia de efectos.

Para establecer la animación debemos usar la propiedad «animation» e indicar diversos valores:

  • Los «keyframes», que son los diversos estados por los que la animación pasará, con los valores CSS para cada uno.
  • El tiempo de animación.
  • La función de progresión para los cambios.
  • El tiempo de retardo, si es que se desea que la animación comience a producirse pasado cierto tiempo.
  • El número de repeticiones que deseamos para la animación.
  • Si deseamos que la animación sea de ida y vuelta o que, al terminar la animación comience de nuevo por su valor inicial.

Algunos de estos valores son perfectamente opcionales. Realmente los importantes son la secuencia de los keyframes y el tiempo de la animación.

Veamos el código CSS para conseguir la animación de un elemento en la página.

.elemento_animar {
  border-radius: 10px;
  border: 1px solid red;
  display: inline-block;
  position: relative;
  left: 0;
  padding: 20px;
  animation: miAnimacion 3s ease-in 1s infinite alternate;
}

@keyframes miAnimacion {
  0% { padding: 20px; left: 0px }
  50% { padding: 10px; left: 120px }
  100% { padding: 50px; left: 300px }
}

Como has podido comprobar, en el elemento a animar se debe de colocar la propiedad «animation», con los valores mencionados anteriormente. Pero donde realmente se tiene que definir la secuencia de animación es en la declaración @keyframes. En ella indicamos el porcentaje de cada etapa y los valores de CSS que irá adquiriendo el elemento en cada momento, siempre realizando los cambios de manera suavizada.

Cómo crear animaciones de carga CSS

Crear una animación atractiva para indicar la carga de contenido no es una tarea demasiado fácil, ya que es necesario un conocimiento elevado de CSS y ser bastante detallista.  Si no andamos con mucho tiempo, en la web podemos encontrar recursos interesantes para conseguir animaciones CSS para la carga, a veces llamados loaders o spinners. Una de las alternativas más populares la tenemos en loading.io.

Cómo implementar una animación de carga CSS

Como hemos dicho, las animaciones CSS simplemente requieren añadir un poco de código a nuestras hojas de estilo y luego aplicar una sencilla clase al elemento de la página donde queremos que aparezca la animación. En el siguiente código HTML podemos ver cómo se implementa un CSS loader de los ofrecidos por «loading».

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Cómo implementar un css loader</title>
    <style>
        .lds-hourglass {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
        }
        .lds-hourglass:after {
            content: ' ';
            display: block;
            border-radius: 50%;
            width: 0;
            height: 0;
            margin: 0 0 32px 0;
            box-sizing: border-box;
            border: 32px solid #666;
            border-color: #666 transparent #666 transparent;
            animation: lds-hourglass 1.2s infinite;
        }
        @keyframes lds-hourglass {
            0% {
                transform: rotate(0);
                animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            }
            50% {
                transform: rotate(900deg);
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            }
            100% {
                transform: rotate(1800deg);
            }
        }
    </style>
</head>
<body>
    <h1>Cómo implementar un css loader</h1>    
    <div class='lds-hourglass'></div>
</body>
</html>

Como puedes ver, en el CSS se encuentra la definición de la animación y en el HTML simplemente tenemos un elemento

al que le hemos colocado la clase necesaria para crear la animación en ese contenedor.

Cambiar el color del elemento animado es tan sencillo como localizar el RGB que lo define en el CSS. Atendiendo al código anterior, tendrás que cambiar todo lugar donde aparece #666, y sustituirlo por el valor que desees.

Cómo implementar animaciones de carga CSS complejas

En el ejemplo anterior hemos seleccionado una animación sencilla deliberadamente. Sin embargo, algunas no son tan fáciles de implementar como aplicar una clase CSS a un único elemento. Esto es porque, en ocasiones para que la animación se vea correctamente necesitamos varios elementos HTML dentro del elemento al que le aplicamos la clase CSS para animarlo.

Por ejemplo, nuestro marcado quedaría así:

<div class='lds-spinner'><div></div><div></div><div></div><div></div><div></div><div></div></div>

Esto nos complica la vida a la hora de implementar la animación, porque no solo se trata de aplicar una clase sobre un elemento, sino que ese elemento necesita tener una serie de tags hijos, pues cada uno forma parte de la animación. En estos casos nuestra recomendación es acudir a un Custom Element, del estándar de Web Components, pues este tipo de elementos encapsulan toda la complejidad del sistema para generar la animación. Gracias a ello, por muy complicado que sea el marcado necesario para implementar la animación, siempre estará contenido en una única etiqueta.

Cómo implementar componente de animación de carga CSS

Un componente para conseguir el efecto de animación de carga lo podemos encontrar en esta página de GitHub (https://github.com/Polydile/dile-components/tree/master/packages/dile-spinner).  Para implementarlo únicamente necesitamos hacer los siguientes pasos:

1.- Instalar el componente en el proyecto

npm i @dile/dile-spinner

2.- Importar el componente desde nuestro JavaScript

import '@dile/dile-spinner/dile-spinner.js';

3.- Usar la etiqueta del componente donde queramos que se vea la animación:

<dile-spinner active></dile-spinner>

Esta etiqueta es el Custom Element, del estándar de Web Components. Como es JavaScript estándar lo puedes usar en cualquier proyecto donde lo necesites. Es decir, es compatible con cualquier stack de tecnologías o frameworks JavaScript con el que trabajes. La implementación de custom elements es siempre similar (importando su JavaScript), por lo que son bastante fáciles de usar y además son compatibles con todos los navegadores actuales.

En el componente dile-spinner, activar o desactivar la animación se consigue mediante el atributo «active». Si simplemente le quitamos el atributo «active» a la etiqueta no se verá la rueda cargando, por lo que activarla o desactivarla aquí sería tan sencillo como colocar o quitar ese atributo de la etiqueta del componente.

Dado que los web components tienen el CSS encapsulado, si necesitamos cambiar el color de elemento necesitamos definir una variable en nuestro CSS. Para este componente tenemos algunas variables CSS disponibles:

body {
    --dile-spinner-color: yellow;
    --dile-spinner-dot-size: 3px;
}

Esto hará que todas las animaciones de carga en la página tengan color amarillo y el tamaño de los puntos de la animación sea de 3px. Pero por supuesto, podríamos redefinir estas variables en cualquier lugar donde queramos que la animación tenga otro color distinto, incluso en el mismo sitio web.

Cómo ejecutar la animación CSS con JavaScript

Por supuesto, aunque la animación se declara mediante CSS, con JavaScript se puede fijar el momento en el que debe comenzar, pudiendo quizás responder a la acción del usuario, como la realización de un clic en el elemento. Para ello simplemente podemos asignar la clase CSS que implementa la animación de manera programática, como respuesta al evento «clic» o cualquier otro que se desee.

<div id='animar'>
  Haz clic para comenzar la animación!
</div>
<script>
  function comenzarAnimacion(e) {
    e.target.classList.add('elemento_animar');
  }
  document.getElementById('animar').addEventListener('click', comenzarAnimacion);
</script>

Conclusiones sobre las animaciones de carga CSS

A modo resumen, las animaciones son una de las funcionalidades del lenguaje CSS que han venido a solucionar diversos problemas y necesidades a la hora de crear una página web (o una aplicación). Por ello, a lo largo de este artículo hemos resumido la importancia y bases fundamentales para que puedas optimizar la experiencia de tus usuarios.

No hay que olvidarse de que la experiencia del usuario afecta a nuestra clasificación dentro de los motores de búsqueda, por lo que tendremos que tener en cuenta diferentes aspectos que son importantes para lograr un buen posicionamiento SEO. Por ello, te recomendamos la elección de un dominio personalizado y un hosting web confiable, que te ayudarán a lograr un rendimiento estable para tu proyecto.

Y por último, ¡te animamos a aplicar estos conocimientos para crear experiencias nuevas en tu página web!

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: