La Propiedad ANIMATION-FILL-MODE

La propiedad animation-fill-mode en CSS especifica cómo se deben aplicar los estilos a un elemento HTML cuando la animación no se está ejecutando.

La propiedad animation-fill-mode en CSS especifica cómo se deben aplicar los estilos a un elemento HTML cuando la animación no se está ejecutando. Esto incluye el período antes de que la animación comience (durante el animation-delay) y el período después de que la animación haya terminado.

Sintaxis Básica

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

CSS
 
selector {
  animation-fill-mode: valor;
}

Donde selector es el elemento HTML al que quieres aplicar la animación y valor es la forma en la que deseas que se apliquen los estilos antes y después de la animación.

Valores de la Propiedad animation-fill-mode

La propiedad animation-fill-mode puede tomar los siguientes valores:

1. none

Este es el valor predeterminado. Cuando la animación no se está ejecutando (antes de comenzar o después de terminar), el elemento vuelve a sus estilos CSS normales definidos en la hoja de estilo.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: lightgray; /* Estilo inicial */
    position: relative;
    animation-name: moverCuadro;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: none; /* Valor por defecto */
  }

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

  <div class="cuadro">Este cuadro se moverá.</div>

</body>
</html>

En este ejemplo, durante el segundo de retraso antes de que comience la animación, el cuadro será gris claro (su estilo inicial). Después de que la animación termine (se mueva a la derecha y cambie a azul), volverá a su posición inicial y color gris claro.

2. forwards

Cuando la animación termina, el elemento conserva los valores de estilo que fueron establecidos por el último fotograma clave de la animación.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    position: relative;
    animation-name: moverCuadroForwards;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards; /* Mantiene el estilo del último fotograma clave */
  }

  @keyframes moverCuadroForwards {
    from { left: 0; background-color: red; }
    to { left: 300px; background-color: blue; }
  }
</style>
</head>
<body>

  <div class="cuadro">Este cuadro se moverá y se quedará en su posición final.</div>

</body>
</html>

Aquí, después de 1 segundo de retraso, el cuadro se moverá a la derecha y cambiará a azul. Al finalizar la animación, permanecerá en esa posición (con left: 300px y background-color: blue).

3. backwards

Durante el período de animation-delay, el elemento adopta los valores de estilo que fueron establecidos por el primer fotograma clave de la animación.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    position: relative;
    animation-name: moverCuadroBackwards;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: backwards; /* Aplica el estilo del primer fotograma clave durante el retraso */
  }

  @keyframes moverCuadroBackwards {
    from { left: 0; background-color: red; }
    to { left: 300px; background-color: blue; }
  }
</style>
</head>
<body>

  <div class="cuadro">Este cuadro mostrará el estilo inicial durante el retraso.</div>

</body>
</html>

En este caso, durante el segundo de retraso, el cuadro será rojo (el color definido en el from del @keyframes). Luego, la animación se ejecutará normalmente. Al finalizar, volverá a su estilo inicial (gris claro) si no se especifica otro fill-mode.

4. both

Este valor combina los efectos de forwards y backwards. El elemento aplica los estilos del primer fotograma clave durante el período de animation-delay y conserva los estilos del último fotograma clave después de que la animación termina.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    position: relative;
    animation-name: moverCuadroBoth;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both; /* Aplica el primer estilo durante el retraso y mantiene el último al final */
  }

  @keyframes moverCuadroBoth {
    from { left: 0; background-color: red; }
    to { left: 300px; background-color: blue; }
  }
</style>
</head>
<body>

  <div class="cuadro">Este cuadro mostrará el estilo inicial durante el retraso y se quedará en el final.</div>

</body>
</html>

Aquí, durante el segundo de retraso, el cuadro será rojo. Luego, se moverá a la derecha y cambiará a azul. Al finalizar la animación, permanecerá en esa posición y color.

Relación con animation-delay y animation-iteration-count

  • animation-delay: animation-fill-mode: backwards y animation-fill-mode: both entran en juego durante el tiempo especificado en animation-delay.
  • animation-iteration-count: animation-fill-mode: forwards y animation-fill-mode: both determinan el estado del elemento después de que todas las iteraciones de la animación se hayan completado.

Ejemplos Prácticos

Ejemplo 1: Animación de Entrada con backwards

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(20px); /* Inicialmente un poco abajo */
    animation: fadeIn 0.5s ease-out 0.5s forwards; /* Animación con retraso */
    animation-fill-mode: backwards; /* Aplica el estilo del primer fotograma durante el retraso */
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento aparecerá con un pequeño retraso.</div>

</body>
</html>

En este ejemplo, el elemento inicialmente es invisible y está un poco abajo. Gracias a animation-fill-mode: backwards, durante el retraso de 0.5 segundos, se aplican estos estilos. Luego, la animación lo hace aparecer y subir a su posición final.

Ejemplo 2: Animación de Salida con forwards

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    opacity: 1; /* Inicialmente visible */
    transition: opacity 0.5s ease-in-out; /* Para el hover */
    animation: fadeOut 0.5s ease-in forwards; /* Animación al hacer clic */
  }

  .elemento:hover {
    opacity: 0.7;
  }

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

  <div class="elemento" onclick="this.style.animationPlayState = 'running'">Haz clic para desaparecer.</div>

  <script>
    const elemento = document.querySelector('.elemento');
    elemento.addEventListener('click', () => {
      elemento.classList.add('fadeOut');
    });
  </script>

</body>
</html>

En este ejemplo (requiere un poco de JavaScript para activar la animación), al hacer clic en el elemento, se iniciará la animación fadeOut. Gracias a animation-fill-mode: forwards, el elemento permanecerá con una opacidad de 0 después de que la animación termine, dando la impresión de que ha desaparecido.

Casos de Uso Comunes

  • Animaciones de entrada y salida: Asegurar que los elementos comiencen o terminen en un estado visual específico.
  • Transiciones: Mantener el estado final de una transición animada.
  • Animaciones interactivas: Controlar la apariencia de un elemento antes o después de una interacción (por ejemplo, al hacer clic o pasar el ratón).

Consideraciones

  • Utiliza animation-fill-mode para controlar la apariencia visual de tus elementos durante los períodos en que la animación no está activa, lo que puede mejorar la experiencia del usuario.
  • Piensa en el estado inicial y final deseado de tu elemento y elige el valor de animation-fill-mode que mejor se adapte a tus necesidades.

Conclusión

La propiedad animation-fill-mode es una herramienta poderosa para refinar tus animaciones CSS. Al permitirte controlar cómo se ven los elementos antes y después de la animación, puedes crear efectos más pulidos y predecibles. Experimenta con los diferentes valores para lograr el comportamiento visual deseado en tus proyectos web.