Si quieres aprender a darle vida a tus páginas web con movimientos y transiciones llamativas, entonces animation name es una propiedad de CSS que no puede faltar en tu repertorio. El día de hoy te contaremos qué es animation name, para qué sirve y cómo puedes usar esta propiedad para crear animaciones increíbles en tus proyectos.

¿Qué es Animation name en CSS y para qué sirve?

¿Qué encontrarás en este post?

¿Qué es la propiedad animation name en CSS?

Animation name es una propiedad de CSS que te permite darle un nombre a las animaciones creadas con @keyframes. Este nombre conecta la animación con el elemento HTML al que quieres aplicarla. En otras palabras, es el puente entre tu código de animación y el objeto que deseas animar.

Cuando combinas animation name con otras propiedades de animación como animation-duration o animation-timing-function, puedes controlar cómo, cuánto tiempo y con qué ritmo se ejecutará la animación.

¿Para qué sirve animation-name?

Las animaciones son elementos muy importantes al momento de diseñar una página web, ya que pueden hacer que una página web sea más interactiva y atractiva, a la vez que funcional. Al momento de añadirlas, la propiedad animation name es útil por tres motivos:

Vincula animaciones con elementos HTML: Especifica cuál animación creada en @keyframes se aplicará al elemento seleccionado.
Organiza animaciones complejas: Puedes definir múltiples animaciones y asignarlas fácilmente a diferentes elementos.
Reutiliza animaciones: Al tener un nombre, una animación puede aplicarse en distintas partes de tu diseño, lo que te ahorra tiempo y esfuerzo.

Elementos principales de animation-name

Veamos ahora los elementos básicos que necesitas para trabajar con animation name:

@Keyframes

La regla @keyframes es donde defines los cambios de estilo que tendrán lugar durante la animación. Piensa en ella como el guion que sigue tu animación, como en el siguiente ejemplo:

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

animation-name

Una vez creada la animación con @keyframes, debes vincularla al elemento usando animation-name:

div {
  animation-name: girar;
  animation-duration: 2s; /* Duración de la animación */
  animation-iteration-count: infinite; /* Repetición infinita */
}

Sintaxis de animation name

Además de ser una función muy útil, animation name tiene una sintaxis muy sencilla y clara, ya que generalmente sigue esta estructura:

animation-name: nombre-de-la-animación;

Aquí, la propiedad con el nombre de la animación corresponde al nombre definido en @keyframes. Aunque, también puedes usar none si no deseas aplicar ninguna animación.

Veamos ahora otro ejemplo:

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

div {
  animation-name: cambioColor;
  animation-duration: 3s;
}

¿Cómo combinar animation name con otras propiedades de animación?

Para que una animación funcione correctamente, necesitas combinar animation name con otras propiedades CSS. Veamos cuáles son:

Animation-duration: Establece la duración de la animación.
Animation-timing-function: Define la velocidad de la animación, por ejemplo, linear o ease.
Animation-delay: Especifica un tiempo de espera antes de iniciar la animación.
Animation-iteration-count: Determina cuántas veces se repite la animación.

Un ejemplo completo sería el siguiente:

@keyframes deslizar {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

div {
  animation-name: deslizar;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: 3;
}

Ventajas de usar animation name en CSS

Si todavía te preguntas por qué deberías usar esta propiedad, te presentamos algunas buenas razones que te van a convencer:

Personalización

Con animation name, puedes nombrar y definir las animaciones según lo requieras. De esta manera, puedes crear efectos únicos y completamente adaptados al diseño y la experiencia de usuario que buscas. Por ejemplo, si quieres que un botón “salte” cuando alguien pase el cursor o que un mensaje de error “parpadee”, puedes implementar y controlar estas ideas.

Código reutilizable

Una de las mayores ventajas de nombrar tus animaciones es que puedes reutilizarlas en diferentes elementos de tu página o incluso en otros proyectos. Por ejemplo, si has creado una animación llamada bounce, puedes aplicarla simplemente en cualquier elemento con una línea de código.

Mejora la experiencia del usuario

Además de ser estéticas, las animaciones también tienen un propósito funcional. Cuando están bien diseñadas, son muy útiles para captar la atención del usuario y guiarlo mientras navega por la página.

Ejemplo de animation name en CSS

Ahora, veamos un ejemplo donde aplicamos animation-name para animar un botón:

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    @keyframes crecer {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(1.2);
      }
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      animation-name: crecer;
      animation-duration: 0.5s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
  </style>
</head>
<body>
  <button>¡Haz clic aquí!</button>
</body>
</html>

En este caso, el botón crece ligeramente cada 0.5 segundos, lo que crea un efecto agradable al navegar por la página.

Si quieres seguir aprendiendo sobre animaciones y otros temas de CSS, con nuestro Bootcamp de Desarrollo Web, podrás dominar en pocos meses las herramientas y tecnologías necesarias para crear sitios web modernos. Empieza ahora una nueva carrera en el sector IT, uno de los más estables y mejor pagados en la actualidad.

¡No esperes más para transformar tu vida!