Animaciones de entrada

Una animación de entrada se reproduce una vez, en el momento en que un elemento entra en pantalla al hacer scroll — a diferencia del activador de scroll, no está ligada a la posición del scroll después de eso, simplemente se dispara y se reproduce hasta el final. Este es el clásico efecto "aparece con un fundido a medida que haces scroll hacia abajo en la página".

Hasta que se dispara, el elemento está oculto; después de terminar de reproducirse, se queda en su estado final y normal. Para hacer que la animación se encadene a través de varios hijos uno tras otro en lugar de animar un solo elemento, ver Stagger children.

Míralo en acción: Entrance animations en fancyanimations.com.

Animaciones

Opciones sutiles para texto de cuerpo normal: Fade in, un deslizamiento suave, o Blur. Reserva zoom, bounce, rotación, sweep y los efectos siempre activos de Ken Burns/ring/border para visuales hero, iconos, insignias y divisores de sección — no para párrafos.

Animación	Qué hace
Fade in	Solo opacidad
Slide (4 direcciones)	Entra desde el 90% de su propio tamaño de distancia; una variante más suave se mueve solo el 50%
Slide — relative (4 direcciones)	La misma idea usando top/bottom/left/right en vez de transform
Zoom in / Zoom out	Escala desde mucho más pequeño / mucho más grande que el tamaño normal
Bounce / Bounce 200px	Cae en su sitio desde arriba, asentándose con un rebote
Rotate (centro, horizontal, vertical, dos diagonales)	Un giro completo hasta su sitio
Blur	Entra enfocándose desde un desenfoque intenso
Flicker	Un breve parpadeo de opacidad al entrar
Sweep (4 direcciones + 2 variantes de centro)	Revelado mediante un clip en movimiento, como un barrido
Circle reveal (centro + 4 esquinas), Circle convert	Un revelado circular
Fan (left/right/centre top/centre bottom)	Un revelado de clip en forma de abanico
Ken Burns (7 direcciones)	Un zoom lento y continuo — siempre visible, sigue funcionando después de "terminar"
Ring (4 colores de paleta × 3 tamaños)	Un anillo de color pulsa hacia fuera una vez — siempre visible después
Border (4 colores de paleta)	Un borde con gradiente rotativo, en marcha de forma continua desde la carga de la página — siempre visible
Custom	No hace nada por sí mismo — escribe tus propios @keyframes (ver abajo)

Los colores de Ring y Border provienen de la paleta de colores de animación del sitio.

Opciones

Ajuste	Efecto
Duration	Cuánto dura la animación. Valor por defecto del sitio: 1 segundo
Delay	Cuánto espera antes de empezar. Valor por defecto del sitio en instalaciones nuevas: sin retraso — usa el trigger point de abajo para elegir el momento en vez de adivinarlo con una espera
Trigger point	Se dispara cuando el borde de referencia del elemento está a ese % de la altura del viewport por encima de la parte inferior de la pantalla; vacío se dispara en cuanto se muestra cualquier parte
Fully visible (referencia = borde inferior)	Se dispara solo cuando el borde inferior del elemento ha entrado en pantalla, en lugar del superior
Reset below the trigger line	Resetea la animación si el elemento vuelve a hacer scroll por debajo de la línea de disparo, no solo cuando sale de la pantalla por completo
Only once	Se reproduce solo la primera vez, para siempre, en esa sesión del visitante
Loop	Se repite para siempre, alternando dirección — el delay se fuerza a 0
Elastic	Un easing elástico y con rebote en lugar de la curva normal
Disable from tablet / mobile	Muestra el estado final y asentado del elemento en ≤991px / ≤767px en lugar de animarlo

Una regla general para el trigger point, según el tamaño del elemento: iconos, botones e insignias — "fully visible" con un trigger alrededor del 10%; imágenes, tarjetas y encabezados — 20–30%; contenedores grandes — 40–50%. "Fully visible" significa la referencia del borde inferior, no simplemente un porcentaje alto.

Cómo funcionan las repeticiones

Configuración	Se reproduce
Por defecto	Cada vez que el elemento vuelve a entrar en pantalla (se resetea cuando sale del todo)
"Reset below the trigger line" activado	También se resetea mientras sigue visible, si vuelve a hacer scroll por debajo del trigger
"Only once" activado	Una vez por carga de página, para ese elemento
Ajuste del sitio "Play entrance animations once"	Una vez, para cada animación de entrada del sitio
Ajuste del sitio "Only on scroll down"	Se reproduce al bajar; se resetea solo al volver a subir

Animaciones personalizadas

Con Custom elegido, el elemento simplemente permanece oculto hasta que se dispara, y entonces recibe una clase de estado "activo". Escribe tu propio animation-name (no la propiedad abreviada animation) en ese estado activo — la duración, el delay y "quedarse en el estado final" siguen viniendo de los ajustes de Duration/Delay de arriba:

.card.fb-anim--custom-active {
  animation-name: card-pop;
  animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes card-pop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}

Bricks

Pestaña Style → Entrance Animations. Añade una animación (es posible superponer una segunda vía CSS personalizado, pero una sola es el caso normal), luego las opciones de Duration/Delay/Trigger/reference/reset/once/loop/elastic/tablet/mobile en el mismo panel. El CSS personalizado para una animación Custom va en el propio CSS personalizado del elemento, apuntando a %root%.fb-anim--custom-active.

El panel Entrance Animations en Bricks, con Stagger children al final.

Dentro de un slider nativo de Bricks, las entradas se reproducen cuando un slide se vuelve activo y cualquier delay se ignora.

Etch

Añade las clases al elemento desde el panel Fancy → Entrance. Para anular la distancia o el color de una animación integrada, fija la variable CSS correspondiente (ver abajo) ya sea directamente en el atributo style del elemento, o en un selector más específico como .hero-title.fb-anim--slide-btt.

Antes de la 3.2.0

Una regla @keyframes escrita dentro de una clase de Etch solía ser descartada silenciosamente por el navegador — Etch coloca el CSS de una clase dentro de la propia regla de la clase, donde @keyframes no es válido. Ponla en su lugar en una hoja de estilos separada del Style Manager en sitios anteriores a la 3.2.0; desde la 3.2.0 en adelante, los keyframes escritos dentro de una clase funcionan directamente (ver Ajustes de animación).

Gutenberg

Necesita tener activado primero "Gutenberg blocks (Beta)" (ver Ajustes de animación). Luego, en el panel Fancy Entrance Animations de la barra lateral del bloque: activa el módulo, elige una animación y las mismas opciones de Duration/Delay/Trigger de arriba. Aquí no hay opción Elastic. Como las clases se guardan directamente en el HTML del bloque, un bloque renderizado dinámicamente/en servidor no las llevará — envuélvelo en un bloque Group y anima ese en su lugar.

Para desarrolladores: variables CSS que puedes anular

Fíjalas en el propio elemento, con un selector un poco más fuerte que la simple clase de animación:

Variable	Afecta a	Valor por defecto
--slide-btt, --slide-ttb, --slide-ltr, --slide-rtl (y variantes suaves -s)	Distancia de slide	90% / 50% del propio tamaño del elemento (variantes relative: 250px, 100px, ±50%)
--fa-bounce	Distancia de caída del bounce	90% / 200px
--kenburns-{direction}-start, --kenburns-{direction}-end	Rango de zoom de Ken Burns	1 → 1.2
--fa-border-radius, --fa-border-size, --fa-border-bg	Forma de la animación Border y el relleno de detrás	0px, 2px, white

Para movimiento sutil en texto de cuerpo, 10–20px de distancia de slide se ve mucho mejor que el valor completo por defecto.

Vídeo explicativo

Grabado con Fancy Animations 2.10 (diciembre de 2025). El panel se ve distinto hoy; la idea que explica sigue valiendo.

Problemas comunes

• El elemento nunca aparece en absoluto. Solo tiene clases de timing (duration/delay) sin un nombre de animación real — se queda atascado en opacity: 0. Añade un nombre de animación, o elimina las clases por completo.
• Las entradas se quedan invisibles hasta que el visitante hace clic o scroll. Una optimización de rendimiento de "delay JavaScript" está reteniendo el propio script observador del plugin. Excluye el script observador del frontend del plugin de cualquier optimización de retraso de JS.
• El elemento es brevemente visible, y luego salta antes de animarse. Tiene su propia opacity (o visibility/display) fijada en otro sitio — en su propio CSS, o en un control del builder — que anula el estado inicial oculto del plugin. Mueve ese estilo a un elemento hijo en su lugar; un elemento con una entrada (o un hijo de stagger) no debería llevar ninguna opacidad propia.
• Un elemento centrado o rotado salta fuera de su sitio justo después de animarse. Las animaciones basadas en transform terminan en translate(0) / scale(1) y se quedan ahí (tienen "fill forwards"), sobrescribiendo cualquier transform que hayas fijado tú mismo. Pon la animación en un contenedor en su lugar.
• Una sombra, o contenido cerca del borde, queda recortado después de una animación sweep/circle/fan. El clip-path final de la animación se queda aplicado después. Anima un contenedor que no tenga sombra ni contenido propio cerca del borde.
• La animación "border" vuelve blanco todo el fondo. Rellena el elemento con --fa-border-bg (blanco por defecto) para que el anillo giratorio tenga algo sobre lo que apoyarse. Fija --fa-border-bg en el elemento a tu propio color, o a transparent, con un selector más fuerte que la clase de la animación. Antes de la 3.2.0 el blanco era fijo: anula background en su lugar.
• Algo en la parte más alta de la página se anima visiblemente tarde. Si pusiste el delay por defecto del sitio por encima de 0 (o el sitio viene de una versión anterior), los elementos ya en pantalla al cargar también esperan ese tiempo. No uses animaciones de entrada ahí, o añade "No delay".