Cómo crear un cargador de página que rebote con animaciones CSS3

Introducción

En este tutorial, creará un cargador de página que rebote utilizando fotogramas clave de animación CSS3. Le mostraremos cómo aplicar estilo HTML para una página de carga, crear fotogramas clave de animación y usar el retraso de animación con fotogramas clave.

Esto es lo que estarás haciendo al final de este tutorial:

O haga clic en el siguiente enlace de CodePen para ver un ejemplo funcional:

Paso 1: escribir el HTML

Primero, escribamos el HTML básico para este proyecto.

pA simple representation of an animated bouncing loader!/pdiv  span/span  span/span  span/span/div

Añadió un divcon el classllamado loader. Este dives responsable de crear todos los elementos del cargador de páginas. Dentro de este div, añadió tres spanelementos consecutivos, cada uno de los cuales representa un círculo del cargador de páginas.

Paso 2: Escritura de estilos CSS

A continuación, vamos a darle estilo a nuestros elementos básicos.

/*_ OPTIONAL: Styles for the demo. *_/body {  background: #2C294F;  padding: 2rem;}p {  font: 1rem/1.45 "Operator Mono";  color: #A599E9;  text-align: center;}

Este bloque de código define los estilos CSS opcionales para la petiqueta y el body.

Dar estilo a la .loaderclase

A continuación, diseñe el cargador de páginas con las siguientes propiedades:

/_ CSS for animated bouncing loader. _/.loader {  display: flex;  justify-content: center;  align-items: center;}

Aquí usamos Flexbox, es decir, display: flex;la propiedad para colocar el cargador de página que rebota en el medio de la página tanto horizontal como verticalmente.

/_ Loader circles _/.loader  span {  background: #FAD000;  border-radius: 50%;  margin: 5rem 0.5rem;  animation: bouncingLoader 0.6s infinite alternate;}.loader  span:nth-child(2) {  animation-delay: 0.2s;}.loader  span:nth-child(3) {  animation-delay: 0.4s;}

Cada círculo del cargador tiene width: 1rem;y height:1rem;con #FFB651color. De forma predeterminada, la forma del cargador de páginas es cuadrada. Para darle una forma circular, configure el border-radiusal 50 %. El siguiente GIF muestra cómo se ve el cargador sin la border-radiuspropiedad. También agregó un poco de margen entre los círculos.

A continuación se muestra cómo se vería el estilo sin la configuración border-radius.

La parte más interesante aquí es la animationpropiedad. Estamos usando un fotograma clave de animación llamado bouncingLoaderque se ejecuta una vez cada 0,6 s y se repite infinitamente. Hablaremos más sobre eso y las propiedades de retardo de la animación en una sección posterior.

Paso 3: creación de fotogramas clave de animación

Los fotogramas clave se utilizan para definir el comportamiento de la animación y nos dan control total de un ciclo de una animación CSS. Los definimos como una @keyframesregla arroba seguida del nombre de la animación, que bouncingLoaderen este caso es .

Dentro de una @keyframeregla, se utilizan las palabras clave fromy topara especificar un punto de inicio y un punto final para la animación. De manera equivalente, también se puede utilizar 0% for fromque representa el punto de inicio y 100%for toque representa el punto final de la animación.

Además, si desea varias transiciones de animación, puede definir un rango de porcentajes, cada uno de los cuales contiene una lista de selectores de estilo. Estos porcentajes se pueden enumerar en cualquier orden y con cualquier diferencia entre ellos. A continuación se muestra una representación simple de estos porcentajes:

@keyframes animationNameHere {  0% { opacity: 1; }  30% { opacity: 0.75; }  50% { opacity: 0.5; }  100% { opacity: 0.25; }}

Ahora escribamos el código para el fotograma clave para crear el cargador de página que rebota:

/_ Define the animation called bouncingLoader. _/@keyframes bouncingLoader {  from {    width: 0.1rem;    height: 0.1rem;    opacity: 1;    transform: translate3d(0);  }  to {    width: 1rem;    height: 1rem;    opacity: 0.1;    transform: translate3d(0, -1rem, 0);  }}

Para ello, se utilizan las palabras clave fromy to, que definen las propiedades de estilo básicas de width, heighty opacityde los círculos. Además de eso, para crear el efecto de rebote, se utilizó la transformpropiedad CSS para cambiar las coordenadas de un elemento determinado, transformando así la ubicación de cada círculo.

Con esta transformpropiedad, ha utilizado la translate3D()función que toma tres entradas que explican el cambio de (x, y, z)coordenadas. Como queríamos que nuestro cargador se ejecutara en un movimiento ondulatorio , necesitamos trasladarlo principalmente a lo largo del eje y manteniendo los ejes x y z constantes. Por lo tanto, el valor del punto final es (0, -1rem, 0).

Vamos a mostrar una demostración de cómo jugar con esta propiedad. Si establece el valor del punto final como transform: translate3d(1rem, 0rem, 1rem);, significará que lo está transformando a lo largo de los ejes x y z mientras mantiene constante el eje y. Ahora su animación se verá así:

Uso del retardo de animación con fotograma clave

Ahora comienza la parte final. Ya que has escrito el código para tu @keyframe, es hora de configurarlo y ponerlo en funcionamiento. El tipo de animación que estás viendo en los GIF anteriores fue posible gracias a las siguientes líneas de código:

/_ Loader circles _/.loader  span {  background: #FAD000;  border-radius: 50%;  margin: 5rem 0.5rem;  animation: bouncingLoader 0.6s infinite alternate;}.loader  span:nth-child(2) {  animation-delay: 0.2s;}.loader  span:nth-child(3) {  animation-delay: 0.4s;}

Puedes darle estilo al elemento que deseas animar con la animationpropiedad y/o sus subpropiedades. Con esta propiedad puedes controlar los timing, durationy otros detalles de tu animación.

Aquí has ​​utilizado las siguientes subpropiedades de animación:

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;

• animation-name:Define el nombre de tu animación que es loaderen mi caso.
• animation-duration:Configura el tiempo que tardará la animación en completar un ciclo.
• animation-iteration-count:Indica cuántas veces quieres que se reproduzca tu ciclo de animación antes de que se detenga.
• animation-direction:Define en qué dirección se reproducirá la animación.

Además de estas, existen otras subpropiedades. Puedes consultarlas en Mozilla Web Docs.

En base a esto, has definido mi animación de la siguiente manera:

animation: bouncingLoader 0.6s infinite alternate;

Esta línea de código hace las siguientes tres cosas:

• Le dice al loaderelemento que use nuestro fotograma clave bouncingLoader.

• Establece la duración de la animación en 0,6 segundos.

• Ejecuta la animación un número infinito de veces.

• Al completarse un solo ciclo, la dirección de la animación alternates, es decir, se invierte.

Has definido estas propiedades para el primer círculo de tu cargador rebotante. Para apuntar al segundo (2) y al tercer (3) círculo, has utilizado el nth-child(n)selector, que te permite seleccionar y apuntar a uno o más elementos que son los nth-childde su padre. Además, para los elementos restantes span, simplemente has definido el animation-delay, de modo que cada elemento no comience a animarse al mismo tiempo.

El producto final

Aquí está el código completo de este cargador de página que rebota animado:

Código HTML

!-- HTML for Bouncing Page Loader --pA simple representation of an animated bouncing page loader!/pdiv  span/span  span/span  span/span/div

Código CSS

/_ CSS for animated bouncing loader. _/.loader {  display: flex;  justify-content: center;    align-items: center;}/_ Loader circles _/.loader  span {  background: #FAD000;  border-radius: 50%;  margin: 5rem 0.5rem;  animation: bouncingLoader 0.6s infinite alternate;}.loader  span:nth-child(2) {  animation-delay: 0.2s;}.loader  span:nth-child(3) {  animation-delay: 0.4s;}/_ Define the animation called bouncingLoader. _/@keyframes bouncingLoader {  from {    width: 0.1rem;    height: 0.1rem;    opacity: 1;    transform: translate3d(0);  }  to {    width: 1rem;    height: 1rem;    opacity: 0.1;    transform: translate3d(0, -1rem, 0);  }}/_ OPTIONAL: Styles for the demo. _/body {  background: #2C294F;  padding: 2rem;}p {  font: 1rem/1.45 "Operator Mono";  color: #A599E9;  text-align: center;}

Aquí hay una demostración funcional con CodePen para esto.

Puedes bifurcar este bolígrafo y probarlo tú mismo.

Tu turno

Después de desarrollar esta animación, se demostró que CSS es increíblemente poderoso. Hay varias formas de crear animaciones como esta. Nos encantaría escuchar sus sugerencias y su forma de crear animaciones CSS.

¡Gracias por leer! Si este tutorial fue útil y despertó tu interés, pruébalo tú mismo y comparte tu opinión en la sección de comentarios a continuación.