0Pricing
CSS Academy · Lección

Dirección, fill-mode e iteración de animaciones

Controle la dirección de reproducción de una animación, el número de repeticiones y su estado final mediante fill-mode.

Dirección, fill-mode e iteración de animaciones es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

animation-iteration-count

Controla cuántas veces se repite la animación. Use infinite para crear un bucle continuo.

<div class="spinner"></div>
<div class="pulse"></div>

animation-direction

Controla la dirección de reproducción en los ciclos alternos:

  • normal — se reproduce hacia delante en cada iteración
  • reverse — se reproduce hacia atrás
  • alternate — alterna entre hacia delante y hacia atrás
  • alternate-reverse — alterna entre hacia atrás y hacia delante
<div class="bounce"></div>

animation-fill-mode

Define qué ocurre con el elemento antes de que comience la animación y después de que termine:

  • none — valor predeterminado; vuelve al estado original
  • forwards — mantiene el último fotograma clave tras finalizar
  • backwards — aplica el primer fotograma clave durante el retraso
  • both — aplica tanto backwards como forwards

Modo de relleno forwards

Es el caso de uso más habitual: mantiene el elemento en su estado final animado después de que termine la animación:

<p class="item">I fade in and stay visible</p>

Modo de relleno backwards

Cuando hay un retraso, backwards hace que el elemento comience en el estado del primer fotograma clave durante el periodo de retraso. Así se evita que se muestre brevemente el estado original antes de que empiece la animación:

<p class="item">Starts invisible during the delay</p>

Modo de relleno both

both combina forwards y backwards. Es la opción más predecible para elementos animados que no deben mostrar un destello antes ni después de la animación.

animation-delay

Retrasa el inicio de una animación. Los retrasos negativos hacen que la animación comience a mitad del recorrido, lo que resulta útil para sincronizar varias animaciones:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Patrón de animación escalonada

Animación escalonada usando únicamente CSS y retrasos con nth-child:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

Pausar y reanudar

Alterne el estado de la animación con JavaScript cambiando animation-play-state:

<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>

Restablecer animaciones

Para volver a reproducir una animación CSS, quite la clase y vuelva a añadirla. El navegador aplica un truco: fuerza un reflow entre la eliminación y la adición.

<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>

animation-delay negativo

Inicie una animación a mitad de la reproducción mediante un retraso negativo. Resulta útil para patrones de fondo sincronizados o elementos en bucle que deben parecer estar ya en movimiento.

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

Comprobación rápida

¿Qué valor de animation-fill-mode mantiene el elemento en el estado de su último fotograma clave después de que termine la animación?

Repaso

animation-iteration-count: infinite repite la animación indefinidamente. animation-direction: alternate crea un movimiento de ida y vuelta. animation-fill-mode: forwards mantiene el estado final. animation-fill-mode: both es la opción más segura. Use retrasos negativos para desplazar animaciones sincronizadas.

Preguntas frecuentes

¿La lección «Dirección, fill-mode e iteración de animaciones» es gratis?

Sí — el texto completo de «Dirección, fill-mode e iteración de animaciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Dirección, fill-mode e iteración de animaciones»?

Controle la dirección de reproducción de una animación, el número de repeticiones y su estado final mediante fill-mode. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Dirección, fill-mode e iteración de animaciones»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Sintaxis de @keyframes y propiedad animation
  2. Dirección, fill-mode e iteración de animaciones
  3. Encadenamiento y secuenciación de animaciones
  4. Animaciones accesibles con prefers-reduced-motion
← Volver a CSS Academy