La Propiedad ANIMATION

Es una propiedad abreviada (shorthand) que te permite configurar todas las propiedades relacionadas con una animación CSS en una sola declaración.

La propiedad animation en CSS es una propiedad abreviada (shorthand) que te permite configurar todas las propiedades relacionadas con una animación CSS en una sola declaración. Las animaciones CSS permiten cambiar gradualmente los valores de las propiedades CSS de un elemento a lo largo del tiempo, creando efectos visuales dinámicos en tu página web.

Sintaxis Básica

La sintaxis básica de la propiedad animation es la siguiente:

CSS
 
selector {
  animation: nombre duración función-de-tiempo retraso conteo dirección modo-de-relleno estado-de-reproducción;
}

Los valores se especifican en el siguiente orden (aunque algunos son opcionales y pueden aparecer en diferente orden, con algunas consideraciones):

  1. animation-name (Obligatorio): Especifica el nombre de la animación @keyframes que quieres aplicar.
  2. animation-duration (Obligatorio): Define la duración de un ciclo de la animación en segundos (s) o milisegundos (ms).
  3. animation-timing-function (Opcional): Especifica la curva de velocidad de la animación. Los valores comunes incluyen linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(). El valor por defecto es ease.
  4. animation-delay (Opcional): Define un retraso antes de que la animación comience a ejecutarse. Se especifica en segundos (s) o milisegundos (ms). El valor por defecto es 0s.
  5. animation-iteration-count (Opcional): Especifica cuántas veces debe repetirse la animación. Puede ser un número entero o infinite para una repetición continua. El valor por defecto es 1.
  6. animation-direction (Opcional): Define si la animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos. Los valores comunes son normal, reverse, alternate, alternate-reverse. El valor por defecto es normal.
  7. animation-fill-mode (Opcional): Especifica cómo se deben aplicar los estilos a un elemento cuando la animación no se está ejecutando (antes de que comience o después de que termine). Los valores comunes son none, forwards, backwards, both. El valor por defecto es none.
  8. animation-play-state (Opcional): Especifica si la animación está en ejecución o pausada. Los valores son running (por defecto) y paused.

Propiedades Individuales de Animación

Aunque la propiedad animation es una forma abreviada conveniente, también puedes controlar cada aspecto de la animación utilizando sus propiedades individuales:

  • animation-name: Define el nombre de la animación.
  • animation-duration: Define la duración de la animación.
  • animation-timing-function: Define la curva de velocidad.
  • animation-delay: Define el retraso antes de la animación.
  • animation-iteration-count: Define el número de repeticiones.
  • animation-direction: Define la dirección de la animación.
  • animation-fill-mode: Define cómo se aplican los estilos antes y después.
  • animation-play-state: Controla si la animación está en pausa o en ejecución.

Creando Animaciones con @keyframes

Para que una animación funcione, debes definir la secuencia de la animación utilizando la regla @keyframes. Esta regla especifica los estilos que tendrá el elemento en diferentes puntos durante la animación.

Sintaxis de @keyframes:

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 ... */
  }
}

Puedes usar porcentajes (de 0% a 100%) para definir los puntos clave de la animación, o las palabras clave from (equivalente a 0%) y to (equivalente a 100%).

Ejemplos Prácticos

Veamos algunos ejemplos para entender mejor cómo funciona la propiedad animation:

Ejemplo 1: Animación Simple de Desplazamiento

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative; /* Necesario para poder usar 'left' */
    animation: moverCuadro 3s infinite alternate; /* Shorthand */
  }

  @keyframes moverCuadro {
    0% {
      left: 0;
      background-color: red;
    }
    100% {
      left: 300px;
      background-color: blue;
    }
  }
</style>
</head>
<body>

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

</body>
</html>

En este ejemplo:

  • Definimos una animación llamada moverCuadro usando @keyframes.
  • La animación cambia la propiedad left del div de 0 a 300 píxeles y también cambia el color de fondo de rojo a azul.
  • En la regla del .cuadro, usamos la propiedad animation para aplicar la animación:
    • moverCuadro: El nombre de la animación.
    • 3s: La duración de cada ciclo es de 3 segundos.
    • infinite: La animación se repetirá infinitamente.
    • alternate: La animación se reproducirá hacia adelante y luego hacia atrás en cada iteración.

Ejemplo 2: Animación con Retraso y Número de Repeticiones

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .circulo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: green;
    animation-name: parpadeo;
    animation-duration: 1s;
    animation-delay: 1s; /* Espera 1 segundo antes de empezar */
    animation-iteration-count: 3; /* Se repite 3 veces */
  }

  @keyframes parpadeo {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
  }
</style>
</head>
<body>

  <div class="circulo"></div>

</body>
</html>

Aquí, el círculo parpadeará tres veces. La animación parpadeo cambia la opacidad del círculo, y la propiedad animation define un retraso de 1 segundo antes de que comience y un conteo de iteraciones de 3.

Ejemplo 3: Uso de la Función de Tiempo (Timing Function)

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 80px;
    height: 80px;
    background-color: orange;
    position: relative;
    margin-bottom: 20px;
  }

  .lineal {
    animation: moverLineal 2s infinite alternate;
  }

  .ease {
    animation: moverEase 2s infinite alternate;
  }

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

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

  <div class="caja lineal" style="animation-timing-function: linear;">Lineal</div>
  <div class="caja ease" style="animation-timing-function: ease;">Ease (por defecto)</div>
  <div class="caja" style="animation: moverEase 2s infinite alternate ease-in;">Ease-in</div>
  <div class="caja" style="animation: moverEase 2s infinite alternate ease-out;">Ease-out</div>
  <div class="caja" style="animation: moverEase 2s infinite alternate ease-in-out;">Ease-in-out</div>

</body>
</html>

Este ejemplo muestra cómo diferentes valores de animation-timing-function afectan la velocidad de la animación durante su ciclo.

animation-fill-mode

La propiedad animation-fill-mode es útil para controlar el estado del elemento antes de que la animación comience y después de que termine:

  • none: No aplica ningún estilo al elemento antes o después de la animación.
  • forwards: El elemento conserva los estilos definidos en el último fotograma clave (normalmente 100%) cuando la animación termina.
  • backwards: El elemento aplica los estilos definidos en el primer fotograma clave (normalmente 0%) durante el período de retraso de la animación.
  • both: Aplica las reglas de forwards y backwards, extendiendo los estilos del primer fotograma clave durante el retraso y los estilos del último fotograma clave después de la animación.

animation-play-state

La propiedad animation-play-state te permite pausar y reanudar una animación. Se usa a menudo con JavaScript para controlar la animación de forma interactiva.

  • running: La animación se está reproduciendo.
  • paused: La animación está detenida.

Consideraciones y Buenas Prácticas

  • Rendimiento: Para animaciones que afectan la posición y el tamaño, es preferible animar las propiedades transform (como translate, scale, rotate) y opacity, ya que generalmente son más eficientes para el navegador.
  • Compatibilidad: Las animaciones CSS tienen buena compatibilidad con los navegadores modernos. Sin embargo, es recomendable verificar la compatibilidad con navegadores más antiguos si es necesario.
  • Claridad: Asegúrate de que tus animaciones sean sutiles y mejoren la experiencia del usuario en lugar de distraer o sobrecargar la página.

Conclusión

La propiedad animation en CSS es una herramienta poderosa para agregar dinamismo e interactividad a tus páginas web. Al combinar la definición de @keyframes con la configuración de la propiedad animation, puedes crear una amplia variedad de efectos visuales. Experimenta con los diferentes valores y propiedades para descubrir las posibilidades creativas que ofrecen las animaciones CSS. ¡Sigue practicando y explorando!