La Propiedad ANIMATION-DURATION

La propiedad animation-duration en CSS define la cantidad de tiempo que tarda una animación en completar un ciclo.

La propiedad animation-duration en CSS define la cantidad de tiempo que tarda una animación en completar un ciclo. Es una de las propiedades esenciales para controlar la velocidad y el ritmo de tus animaciones CSS.

Sintaxis Básica

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

CSS
 
selector {
  animation-duration: tiempo;
}

Donde selector es el elemento HTML al que quieres aplicar la animación y tiempo es la duración del ciclo de la animación.

Valores de la Propiedad animation-duration

La propiedad animation-duration acepta un valor de tiempo, que puede ser especificado en segundos (s) o milisegundos (ms).

1. Especificando la Duración en Segundos (s)

Puedes definir la duración de la animación utilizando segundos. Por ejemplo, 2s significa que la animación tardará 2 segundos en completar un ciclo.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: moverCuadro;
    animation-duration: 2s; /* La animación dura 2 segundos */
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

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

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

</body>
</html>

En este ejemplo, el cuadrado rojo tardará 2 segundos en moverse de izquierda a derecha y otros 2 segundos en volver, ya que la dirección es alternate.

2. Especificando la Duración en Milisegundos (ms)

También puedes usar milisegundos para definir la duración de la animación. Por ejemplo, 500ms es equivalente a 0.5 segundos.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .circulo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    animation-name: cambiarOpacidad;
    animation-duration: 500ms; /* La animación dura 0.5 segundos */
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes cambiarOpacidad {
    from { opacity: 1; }
    to { opacity: 0.3; }
  }
</style>
</head>
<body>

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

</body>
</html>

Aquí, el círculo parpadeará (cambiando su opacidad) rápidamente, ya que cada ciclo de la animación dura solo 0.5 segundos.

3. Diferentes Duraciones

La elección de la duración de la animación afecta significativamente la percepción de la animación:

  • Duraciones cortas (ej. < 1 segundo): Suelen crear animaciones rápidas y enérgicas, como un breve destello o un rebote rápido.
  • Duraciones medias (ej. 1-3 segundos): Son adecuadas para movimientos más suaves y cambios visuales que el usuario puede seguir cómodamente.
  • Duraciones largas (ej. > 3 segundos): Pueden usarse para animaciones más contemplativas o para transiciones lentas.

Ejemplos Prácticos

Ejemplo 1: Comparando Diferentes Duraciones

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 80px;
    height: 80px;
    background-color: orange;
    position: relative;
    margin-bottom: 20px;
    animation-name: mover;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .lento { animation-duration: 3s; }
  .medio { animation-duration: 1.5s; }
  .rapido { animation-duration: 0.75s; }

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

  <div class="caja lento">Lento (3s)</div>
  <div class="caja medio">Medio (1.5s)</div>
  <div class="caja rapido">Rápido (0.75s)</div>

</body>
</html>

En este ejemplo, verás tres cajas que se mueven de izquierda a derecha y viceversa a diferentes velocidades debido a sus diferentes animation-duration.

Ejemplo 2: Animación de Carga

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: girar 1.2s linear infinite; /* Duración de 1.2 segundos por vuelta */
  }

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

  <div class="loader"></div>

</body>
</html>

Aquí, la animación de carga tiene una duración de 1.2 segundos por cada rotación completa.

Relación con Otras Propiedades de Animación

  • animation-iteration-count: La duración de la animación se multiplica por el número de iteraciones para determinar la duración total de la animación. Por ejemplo, si la duración es 2 segundos y el conteo de iteraciones es 3, la animación completa durará 6 segundos.
  • animation-delay: La duración de la animación comienza a contar después de que haya transcurrido el tiempo especificado en animation-delay.

Casos de Uso Comunes

  • Indicadores de carga: Una duración adecuada puede hacer que el indicador de carga parezca progresivo y no demasiado rápido o lento.
  • Transiciones sutiles: Duraciones más largas pueden crear transiciones suaves y elegantes entre estados.
  • Énfasis visual: Duraciones cortas pueden usarse para llamar la atención sobre un elemento de forma rápida.
  • Animaciones complejas: La duración debe ser lo suficientemente larga para permitir que todos los pasos de la animación se ejecuten de manera comprensible.

Consideraciones

  • Elige una duración que se ajuste al propósito de la animación y a la experiencia del usuario. Una animación demasiado rápida puede pasar desapercibida, mientras que una demasiado lenta puede resultar tediosa.
  • Considera la complejidad de la animación al determinar su duración. Animaciones con muchos pasos o cambios pueden requerir una duración más larga.

Conclusión

La propiedad animation-duration es fundamental para definir el ritmo de tus animaciones CSS. Al ajustar la duración, puedes controlar la velocidad y la sensación de tus efectos visuales, contribuyendo significativamente a la experiencia general del usuario en tu sitio web. ¡Experimenta con diferentes valores y observa cómo influyen en tus animaciones!