Question 1

¿Cuál es la diferencia entre animaciones CSS (@keyframes) y transiciones CSS?

Accepted Answer

Las transiciones CSS animan un cambio de propiedad de un estado a otro desencadenado por un evento (como `:hover`). Solo requieren un estado inicial y final. Las animaciones CSS con `@keyframes` se ejecutan de forma independiente — pueden hacer bucle, reproducirse al cargar la página sin interacción del usuario y tener múltiples pasos intermedios. Use transiciones para efectos hover simples; use animaciones para secuencias complejas y autónomas como loaders o efectos de atención.

Question 2

¿Qué hace animation-fill-mode y cuándo debería usar 'forwards'?

Accepted Answer

`animation-fill-mode` controla el estilo del elemento antes de que comience la animación y después de que termine. `forwards` mantiene el elemento en el estado del último fotograma clave después de que termina la animación. `backwards` aplica el estilo del primer fotograma clave durante el período de retraso. `both` combina ambos comportamientos. Use `forwards` cuando quiera que el elemento animado permanezca en su posición final (p.ej., un elemento deslizado que debe permanecer visible).

Question 3

¿Cómo hago que una animación CSS se reproduzca en bucle infinitamente?

Accepted Answer

Establezca `animation-iteration-count: infinite` en el elemento. También puede usar un valor numérico como `animation-iteration-count: 3` para repetir exactamente 3 veces. Combine con `animation-direction: alternate` para hacer que se invierta en cada bucle (efecto ping-pong) en lugar de volver al inicio. Para un efecto de pulso, `animation-direction: alternate` con `infinite` se ve mucho más suave que un bucle simple.

Question 4

¿Qué es la propiedad will-change y mejora el rendimiento de las animaciones?

Accepted Answer

`will-change` indica al navegador que un elemento va a cambiar, permitiéndole configurar capas de composición GPU por adelantado: `will-change: transform, opacity`. Esto puede mejorar dramáticamente la fluidez de las animaciones en páginas complejas. Sin embargo, úselo con moderación — aplicarlo a demasiados elementos desperdicia memoria GPU y puede perjudicar el rendimiento. Añádalo solo cuando note tirones y elimínelo después de que la animación termine si es posible.

Question 5

¿Qué es la media query prefers-reduced-motion y por qué es importante?

Accepted Answer

`prefers-reduced-motion` detecta usuarios que han solicitado movimiento reducido en su configuración del SO (común para personas con trastornos vestibulares o mareos). Envuelva las animaciones en una media query: `@media (prefers-reduced-motion: reduce) { .animated { animation: none; } }`. Esta es una mejor práctica de accesibilidad — nunca la omita para ninguna animación que implique movimiento, rotación o parpadeo. Muchos frameworks CSS modernos la incluyen automáticamente.

Generador de Animaciones CSS

Acerca de esta herramienta

Preguntas Frecuentes

Comments & Feedback