Animación de Acercamiento y Alejamiento: Dominio de los Fundamentos de CSS

Introducción

En este laboratorio, exploraremos las animaciones CSS creando un efecto de acercamiento y alejamiento simple pero efectivo. Las animaciones CSS nos permiten agregar efectos visuales dinámicos a las páginas web sin utilizar JavaScript. Al final de este laboratorio, entenderás cómo utilizar los keyframes (fotogramas clave) y las propiedades de animación de CSS para crear transiciones fluidas que pueden mejorar la experiencia del usuario en tus sitios web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35259{{"Animación de Acercamiento y Alejamiento"}} css/fonts -.-> lab-35259{{"Animación de Acercamiento y Alejamiento"}} css/box_model -.-> lab-35259{{"Animación de Acercamiento y Alejamiento"}} css/width_and_height -.-> lab-35259{{"Animación de Acercamiento y Alejamiento"}} css/backgrounds -.-> lab-35259{{"Animación de Acercamiento y Alejamiento"}} css/animations -.-> lab-35259{{"Animación de Acercamiento y Alejamiento"}} css/transformations -.-> lab-35259{{"Animación de Acercamiento y Alejamiento"}} end

Comprender la estructura HTML

Antes de comenzar a crear nuestra animación, necesitamos entender la estructura HTML con la que trabajaremos. En este paso, examinaremos el archivo HTML proporcionado y realizaremos las modificaciones necesarias.

Abre el archivo index.html en el editor.
Si el archivo está vacío o falta, créalo con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

Entendamos qué hace este HTML:
- Tenemos una estructura de documento HTML estándar con un título y configuraciones de viewport (área visible)
- Enlazamos a un archivo CSS externo llamado style.css
- Incluimos un encabezado y un párrafo para explicar nuestra demostración
- Lo más importante, tenemos un elemento <div> con la clase zoom-in-out-box que se animará
Guarda el archivo index.html si hiciste algún cambio.

Este elemento div será nuestro lienzo para crear la animación. En el siguiente paso, estilizaremos este elemento utilizando CSS.

Estilos CSS básicos

Ahora que tenemos nuestra estructura HTML lista, creemos los estilos CSS básicos para nuestro elemento de animación.

Abre el archivo style.css en el editor.
Si el archivo está vacío o falta, créalo con el siguiente contenido:

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

Entendamos qué hace este CSS:
- Establecemos algunos estilos básicos para la página (fuente, ancho y márgenes)
- Estilizamos el encabezado con un color gris oscuro
- Para nuestro elemento de animación .zoom-in-out-box,:
  - Agregamos un margen de 24px alrededor de él
  - Establecemos su ancho y alto en 50px
  - Le damos un color de fondo rosa vibrante
Guarda el archivo style.css después de realizar estos cambios.
Para ver tu progreso, haz clic en el botón "Go Live" en la esquina inferior derecha de VSCode. Esto iniciará un servidor web en el puerto 8080. Luego, actualiza la pestaña Web 8080 para ver tu cuadro estilizado.

Ahora deberías ver un pequeño cuadrado rosa en tu página web. Este cuadrado es el elemento que animaremos en los siguientes pasos.

Creación de la animación con keyframes

Las animaciones CSS funcionan definiendo keyframes (fotogramas clave) que especifican los estilos que un elemento debe tener en varios puntos durante la secuencia de animación. Vamos a crear los keyframes para nuestra animación de acercamiento y alejamiento.

Abre nuevamente el archivo style.css y agrega el siguiente código al final:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

Entendamos qué hace este código:
- @keyframes es una regla @ de CSS que define las etapas y estilos de una animación
- zoom-in-zoom-out es el nombre que le damos a nuestra animación (haremos referencia a este nombre más adelante)
- Dentro de los keyframes, definimos lo que sucede en diferentes puntos de la animación:
  - En 0% (el inicio), el elemento está en su tamaño normal con scale(1, 1)
  - En 50% (a mitad de camino), el elemento crece a 1.5 veces su tamaño con scale(1.5, 1.5)
  - En 100% (el final), el elemento vuelve a su tamaño normal
- La propiedad transform con la función scale() cambia el tamaño del elemento
Guarda el archivo style.css después de agregar estos keyframes.

Los keyframes definen lo que hará nuestra animación, pero aún no la hemos aplicado a nuestro elemento. En el siguiente paso, conectaremos la animación a nuestro cuadro.

Aplicación de la animación

Ahora que hemos definido nuestros keyframes, necesitamos aplicar la animación a nuestro elemento de cuadro.

Abre nuevamente el archivo style.css y modifica el selector .zoom-in-out-box de la siguiente manera:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

Entendamos la propiedad de animación que agregamos:
- animation es una propiedad abreviada que establece múltiples propiedades de animación a la vez
- zoom-in-zoom-out es el nombre de nuestra animación de keyframes
- 1s especifica que un ciclo de la animación dura 1 segundo
- ease es la función de temporización que hace que la animación comience lentamente, acelere y luego se vuelva lenta de nuevo
- infinite significa que la animación se repetirá para siempre
Guarda el archivo style.css después de realizar estos cambios.
Si el servidor web ya está en funcionamiento, simplemente actualiza la pestaña Web 8080. Si no, haz clic en "Go Live" en la esquina inferior derecha para iniciar el servidor y luego abre la pestaña Web 8080.

Ahora deberías ver tu cuadrado rosa acercándose y alejándose suavemente en una animación continua. El cuadrado crece hasta alcanzar 1.5 veces su tamaño original y luego se contrae hasta su tamaño normal. Este ciclo se repite infinitamente.

Experimentar con propiedades de animación

Personalicemos nuestra animación experimentando con diferentes propiedades de animación. Esto te ayudará a entender cómo estas propiedades afectan el comportamiento de la animación.

Abre el archivo style.css y modifica el selector .zoom-in-out-box para probar diferentes propiedades de animación:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Add a slight rotation during the animation */
  border-radius: 10px;
}

Entendamos lo que cambiamos:
- Extendimos la duración de la animación a 2s (2 segundos)
- Cambiamos la función de temporización a ease-in-out, que hace que tanto el inicio como el final de la animación sean suaves
- Agregamos un border-radius de 10px para redondear las esquinas de nuestro cuadro
También modifiquemos nuestros keyframes para agregar un efecto de rotación:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

En esta definición actualizada de keyframes:
- Agregamos una función rotate() a la propiedad transform
- En el 50% de la animación, el elemento ahora gira 45 grados mientras se agranda
- También cambiamos el color de fondo a azul en el 50% de la animación
Guarda el archivo style.css después de realizar estos cambios.
Actualiza la pestaña Web 8080 para ver tu animación mejorada.

Tu animación ahora debería ser más lenta (2 segundos por ciclo), tener esquinas redondeadas, rotar mientras se acerca y aleja, y cambiar de color a mitad de la animación. Esto demuestra cómo las animaciones CSS pueden combinar múltiples cambios de propiedades para crear efectos visuales ricos.

Siéntete libre de experimentar más con diferentes propiedades y valores para ver cómo afectan tu animación.

Resumen

¡Felicidades por completar el laboratorio de Animación de Acercamiento y Alejamiento! En este laboratorio, has aprendido:

Cómo estructurar HTML para una animación CSS
Cómo dar estilo a elementos utilizando propiedades básicas de CSS
Cómo crear animaciones de keyframes que definen las etapas de una animación
Cómo aplicar animaciones a elementos utilizando la propiedad animation
Cómo personalizar animaciones ajustando la temporización, la función de aceleración y combinando múltiples cambios de propiedades

Estas técnicas de animación CSS se pueden aplicar para crear interfaces de usuario atractivas que respondan a las interacciones del usuario o llamen la atención sobre elementos importantes en tus páginas web.

Para continuar tu viaje de aprendizaje, considera explorar otras propiedades de animación como animation-delay, animation-direction y animation-fill-mode. También puedes experimentar animando diferentes propiedades de CSS más allá de transform, como opacity, position y size.