La Propiedad ANIMATION-NAME

La propiedad animation-name en CSS es fundamental para definir y aplicar una animación a un elemento HTML.

La propiedad animation-name en CSS es fundamental para definir y aplicar una animación a un elemento HTML. Su función principal es establecer el nombre de la animación CSS que se debe utilizar. Este nombre debe coincidir con el nombre de una regla @keyframes que define la secuencia de la animación.

En esencia, animation-name actúa como un enlace entre el elemento al que deseas animar y la definición de la animación en sí.

Sintaxis Básica

La sintaxis básica para usar la propiedad animation-name es la siguiente:

CSS
 
selector {
  animation-name: nombre-de-la-animacion;
}

Donde selector es el elemento HTML al que quieres aplicar la animación y nombre-de-la-animacion es el nombre que le has dado a tu animación dentro de la regla @keyframes.

Valores de la Propiedad animation-name

La propiedad animation-name puede tomar los siguientes valores:

1. <custom-ident> (Nombre Personalizado)

Este es el valor más común. Debes elegir un nombre descriptivo para tu animación. Este nombre debe cumplir con las reglas de los identificadores CSS (letras, números, guiones bajos y guiones, sin empezar con un número). Es sensible a mayúsculas y minúsculas.

Ejemplo:

CSS
 
.mi-elemento {
  animation-name: aparecer; /* El nombre de la animación es "aparecer" */
  animation-duration: 1s;
}

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

En este ejemplo, la propiedad animation-name del elemento .mi-elemento se establece en aparecer. Esto indica que se debe aplicar la animación definida por la regla @keyframes aparecer.

Nombres válidos:

  • slideIn
  • rotate-360
  • fade_out
  • mostrarElemento

Nombres inválidos:

  • 123animacion (empieza con un número)
  • mi animación (contiene un espacio)

2. none

Este valor indica que no se debe aplicar ninguna animación al elemento. Es el valor inicial de la propiedad animation-name.

Ejemplo:

CSS
 
.otro-elemento {
  animation-name: none; /* No se aplicará ninguna animación */
}

Creando la Animación con @keyframes

Como se mencionó anteriormente, la propiedad animation-name por sí sola no crea la animación. Necesitas definir la secuencia de la animación utilizando la regla @keyframes. La sintaxis de @keyframes es la siguiente:

CSS
 
@keyframes nombre-de-la-animacion {
  /* Bloque de reglas que definen la animación */
  0% { /* Estilos al inicio de la animación */
    /* ... propiedades CSS ... */
  }
  50% { /* Estilos en un punto intermedio (opcional) */
    /* ... propiedades CSS ... */
  }
  100% { /* Estilos al final de la animación */
    /* ... propiedades CSS ... */
  }
}

El nombre-de-la-animacion dentro de @keyframes debe ser exactamente el mismo que el valor que asignaste a la propiedad animation-name en el selector del elemento.

Ejemplos Prácticos

Ejemplo 1: Animación de Traslación

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative; /* Necesario para poder usar 'left' */
    animation-name: moverDerecha;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes moverDerecha {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro"></div>

</body>
</html>

En este ejemplo, la animación llamada moverDerecha desplaza el cuadrado hacia la derecha. La propiedad animation-name: moverDerecha; en el .cuadro es lo que activa esta animación.

Ejemplo 2: Animación de Rotación

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .rueda {
    width: 80px;
    height: 80px;
    border: 2px solid black;
    border-radius: 50%;
    animation-name: rotarContinuamente;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes rotarContinuamente {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>

  <div class="rueda"></div>

</body>
</html>

Aquí, la animación rotarContinuamente hace que el círculo gire. Nuevamente, animation-name: rotarContinuamente; es la clave para vincular la animación al elemento.

Usando Múltiples Animaciones

Puedes aplicar varias animaciones a un mismo elemento separando sus nombres con comas en la propiedad animation-name. También necesitarás definir las propiedades de duración, función de tiempo, etc., correspondientes para cada animación (puedes hacerlo también con la propiedad abreviada animation).

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-animado {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    animation-name: mover, cambiarColor; /* Dos animaciones */
    animation-duration: 2s, 1.5s; /* Duración para cada animación */
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes mover {
    from { left: 0; }
    to { left: 200px; }
  }

  @keyframes cambiarColor {
    from { background-color: lightblue; }
    to { background-color: lightcoral; }
  }
</style>
</head>
<body>

  <div class="elemento-animado"></div>

</body>
</html>

En este ejemplo, el elemento .elemento-animado se moverá horizontalmente y cambiará de color simultáneamente, gracias a la aplicación de dos animaciones diferentes.

Relación con Otras Propiedades de Animación

La propiedad animation-name trabaja en conjunto con otras propiedades de animación como:

  • animation-duration: Define cuánto tiempo tarda un ciclo de la animación.
  • animation-timing-function: Especifica la curva de velocidad de la animación.
  • animation-delay:1 Define un retraso antes de que comience la animación.
  • animation-iteration-count: Especifica cuántas veces se repite la animación.
  • animation-direction: Define si la animación se reproduce hacia adelante, hacia atrás o alternando.
  • animation-fill-mode: Especifica cómo se aplican los estilos antes y después de la animación.
  • animation-play-state: Permite pausar y reanudar la animación.

Consideraciones

  • Elige nombres descriptivos para tus animaciones en @keyframes y en animation-name para que tu código sea más fácil de entender y mantener.
  • Asegúrate de que el nombre en animation-name coincida exactamente con el nombre en @keyframes (incluyendo mayúsculas y minúsculas).
  • Puedes aplicar la propiedad animation-name directamente en la hoja de estilo CSS o dinámicamente a través de JavaScript.

Conclusión

La propiedad animation-name es el punto de partida para aplicar animaciones CSS a tus elementos HTML. Al vincular un elemento a una regla @keyframes específica, defines qué secuencia de estilos se aplicará a lo largo del tiempo, permitiéndote crear efectos visuales atractivos y dinámicos en tu sitio web. ¡Experimenta con diferentes nombres y secuencias de fotogramas clave para dar vida a tus diseños!