CodeForge

Maquetación Web Dinámica / Animaciones CSS: de sencillas a profesionales

animation: el panel de control completo

Teoría20 min20 XP

animation es en realidad ocho propiedades disfrazadas de una. Ya usas tres (nombre, duración, curva); hoy dominas las que resuelven los "¿por qué hace eso?" clásicos: la animación que parpadea al reiniciar, el elemento que aparece de golpe ANTES de su entrada, y la que termina y "rebobina" sola.

iteration-count y direction: cuántas veces y hacia dónde

repeticion.css

alternate merece atención: reproduce los fotogramas de ida y luego DE REGRESO. La flotación de la lección pasada (0% abajo → 50% arriba → 100% abajo) puede reescribirse a la mitad: solo de abajo → a arriba, con alternate haciendo el regreso gratis. Menos fotogramas, mismo vaivén — y la curva de easing se aplica en cada sentido, así que el rebote queda simétrico.

fill-mode: qué pasa antes y después de la función

Esto resuelve el bug más frustrante de las animaciones de entrada:

entrada.css

Sin backwards, durante el delay la tarjeta se ve en su estado normal (¡visible!), luego SALTA a opacity: 0 y entra — un parpadeo horrible. Con backwards, la tarjeta espera el delay ya en su pose del from: invisible, lista para entrar. Cuando en la lección 4 animes entradas escalonadas con delays distintos, backwards será la diferencia entre elegancia y strobe.

forwards es el espejo: una animación de salida (to { opacity: 0 }) sin forwards termina... y el elemento REAPARECE, porque al acabar la animación el CSS normal recupera el control. forwards congela la pose final.

Míralo en frío

(Confesión de tramoya: para poder REPETIR la comparación en loop, este demo simula ambos comportamientos dentro de los keyframes. En tu código real es una sola palabra: backwards.)

Tu animación de salida desvanece el modal (to: opacity 0)... y al terminar, el modal reaparece en pantalla. ¿Causa raíz?

play-state: el botón de pausa

pausa.css

A diferencia de quitar la animación (que la REINICIA al devolverla), paused la congela donde va y running la retoma del mismo punto. Es la base del patrón "pausar al hover" de carruseles y marquesinas — y una cortesía de accesibilidad: contenido en movimiento que el usuario pueda detener.

La forma larga de todo el panel, para cuando el shorthand se vuelva críptico:

forma-larga.css
.tarjeta {
animation-name: aparecer;
animation-duration: 500ms;
animation-timing-function: ease-out;
animation-delay: 400ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: backwards;
animation-play-state: running;
}

Mini-reto

Tres experimentos de un minuto sobre tu pulso de "EN VIVO": (1) cámbialo a 3 iteraciones y observa dónde queda al terminar; (2) agrégale forwards y compara; (3) móntale animation-play-state: paused al hover del titular. Tocar las perillas una por una — con hipótesis antes de cada cambio — es como se fija este panel en la memoria.

Qué sigue

Ya controlas el QUÉ y el CUÁNDO. Sigue el CUÁNTO CUESTA: por qué animar width puede congelar un celular gama baja mientras transform vuela a 60fps, y qué hace (y qué NO hace) will-change. La lección de rendimiento — la que separa animaciones bonitas de animaciones profesionales.