Combinar animaciones
Un elemento puede reproducir más de una animación de entrada o de ScrollTrigger a la vez — añade una segunda fila a la misma lista de Animations en lugar de elegir solo una. Dos animaciones se combinan bien cuando no mueven la misma propiedad CSS al mismo tiempo; si la mueven, compiten entre sí y solo gana la última que se aplicó.
Lo que combina bien
- Una animación de forma con un fundido: Zoom o Slide con Fade.
- Un revelado con clip-path junto con un deslizamiento y un fundido: Sweep, Circle o Fan con Slide y Fade.
- Un revelado con clip-path junto con un zoom y un fundido: Sweep, Circle o Fan con Zoom y Fade.
- Ring (o Border, por sí solo) con un revelado de clip-path, un deslizamiento y un fundido.
Lo que no combina
- Zoom, Slide, Bounce y Rotate nunca se combinan entre sí — las cuatro mueven el elemento con
transform, y solo la última que se aplicó mueve de verdad al elemento.- Slide relative es la única excepción: es un juego de clases aparte, construido
específicamente para emparejarse con otra animación de
transform. Donde el Slide normal mueve el propio elemento, Slide relative lo mueve un porcentaje de la pantalla en su lugar, así que no choca. Ten en cuenta que añadeposition: relativeal elemento.
- Slide relative es la única excepción: es un juego de clases aparte, construido
específicamente para emparejarse con otra animación de
- Sweep, Fan y Circle nunca se combinan entre sí — las tres revelan el elemento con
clip-path, y solo gana la última que se aplicó. - Border nunca se combina con nada más, y solo se ve bien en elementos de esquinas cuadradas
(o apenas redondeadas) — anima una línea alrededor del propio borde del elemento con
::before/::after, que un border-radius grande distorsiona.
Cómo añadir una segunda animación
- Bricks
- Etch
- Gutenberg
Pestaña Style → Entrance Animations (o ScrollTrigger Animations) → Add Animation otra vez. Cada fila de la lista aplica su propia clase al elemento.
Panel Fancy → Entrance Animations (o el panel equivalente de ScrollTrigger) → + Add otra vez, igual que la primera.
El panel Fancy de la barra lateral del bloque solo te deja elegir una animación de entrada a la
vez. Para añadir una segunda clase a mano, usa el campo propio del bloque Advanced → Additional
CSS class(es) y escribe directamente la clase de la segunda animación (por ejemplo
fb-anim--fade-in) — consulta Referencia de clases de animación para la
lista completa de clases.
Consulta Propiedades CSS de las animaciones para el desglose completo, propiedad por propiedad, del que salen las reglas de esta página.