¿Cómo utilizar animaciones y estados Hover/Active en el Editor de bloques de Waclis?

El Editor de bloques de Waclis permite agregar movimiento e interacción visual a los elementos de una Página web.

Puedes, por ejemplo:

• hacer que una sección aparezca suavemente cuando el visitante llega a ella;

• agregar una demora entre la aparición de diferentes tarjetas;

• cambiar el color de un botón cuando el usuario coloca el cursor encima;

• modificar visualmente una imagen o tarjeta durante una interacción;

• aplicar estilos diferentes a determinados elementos según su posición.

Estas herramientas pueden ayudar a crear una experiencia más dinámica, pero es importante utilizarlas con moderación y comprender la diferencia entre animaciones y estados.

Animaciones y estados no son lo mismo

Aunque ambas herramientas permiten generar cambios visuales, funcionan de manera diferente.

Animaciones

Se configuran desde:

Avanzado → Animate on scroll

Permiten que un elemento se anime cuando aparece en la pantalla mientras el visitante recorre la página.

Por ejemplo:

El visitante baja por la página

↓

Llega a Beneficios

↓

Las tarjetas aparecen con una animación

Estados

Se configuran desde:

Estilo → State

Permiten definir cómo debe verse un elemento durante determinadas situaciones.

Por ejemplo:

Botón normal
↓
El usuario coloca el cursor encima
↓
Botón con otro color

Ese segundo aspecto corresponde al estado:

hover

Parte 1: Animate on scroll

Para agregar una animación:

1. selecciona el elemento;

2. abre Avanzado;

3. localiza Animate on scroll.

Dentro de esta configuración encontrarás opciones como:

• Animation type;

• Duration;

• Delay;

• Play animation.

¿Qué significa Animate on scroll?

Significa que la animación se ejecuta cuando el elemento entra en la zona visible mientras el visitante se desplaza por la página.

Por ejemplo, una página puede tener:

Banner

Quiénes somos

Beneficios

Servicios

Testimonios

Cuando el visitante llega a Beneficios, las tarjetas pueden aparecer mediante una animación.

La animación no necesariamente comienza cuando se carga toda la página, sino cuando el usuario alcanza ese contenido durante el recorrido.

Paso 1: selecciona el elemento correcto

Antes de configurar una animación, comprueba qué elemento tienes seleccionado.

Por ejemplo:

Card
├── Image
├── Heading
└── Paragraph

Puedes animar:

• Image;

• Heading;

• Card completa.

El resultado será diferente.

¿Conviene animar el elemento interno o su contenedor?

Depende de lo que quieras conseguir.

Si quieres que aparezca solamente la imagen:

selecciona Image.

Si quieres que imagen, título y texto aparezcan como una única composición:

selecciona la Card o el contenedor correspondiente.

En muchos casos resulta más limpio animar el contenedor completo en lugar de aplicar una animación independiente a cada pequeño elemento.

Utiliza Navigator cuando tengas dudas

Si no sabes qué nivel estás seleccionando, utiliza:

Navigator

Por ejemplo:

Section
└── Container
    └── Grid Row
        ├── Card
        ├── Card
        └── Card

Desde Navigator puedes elegir exactamente qué elemento recibirá la animación.

Animation type

La opción:

Animation type

permite seleccionar el efecto que se aplicará al elemento.

Las alternativas disponibles pueden variar dentro del editor.

Dependiendo del efecto elegido, el elemento puede realizar diferentes tipos de entrada o movimiento.

La mejor forma de elegir una animación es probarla mediante:

Play animation

y evaluar si acompaña correctamente al diseño.

No elijas una animación solamente porque llama la atención

Una animación debe acompañar el contenido.

Por ejemplo, una entrada suave puede funcionar bien para:

• beneficios;

• tarjetas;

• testimonios;

• imágenes;

• secciones institucionales.

Un efecto muy intenso puede ser menos apropiado para:

• textos largos;

• información importante;

• formularios;

• bloques que el usuario necesita leer rápidamente.

Duration

Duration determina cuánto tiempo tarda la animación en completarse.

Conceptualmente:

Duration corta
→ movimiento rápido

Duration larga
→ movimiento más lento

El objetivo es encontrar un equilibrio.

Si la animación es demasiado rápida, apenas podrá percibirse.

Si es demasiado lenta, puede hacer que el visitante tenga que esperar para acceder visualmente al contenido.

Delay

Delay agrega una espera antes de comenzar la animación.

Por ejemplo:

Elemento entra en pantalla
↓
Espera
↓
Comienza la animación

Puede utilizarse para crear una aparición progresiva entre varios elementos.

Ejemplo: tres tarjetas con aparición escalonada

Supongamos que tienes:

[ ENVÍOS ] [ CALIDAD ] [ SOPORTE ]

Puedes aplicar el mismo tipo de animación a las tres, pero variar ligeramente su Delay.

Conceptualmente:

Envíos
→ aparece primero

Calidad
→ aparece después

Soporte
→ aparece por último

Esto puede generar una secuencia visual ordenada.

Mantén coherencia entre los efectos

Si tienes tres tarjetas relacionadas, normalmente es preferible utilizar:

Tarjeta 1 → misma animación
Tarjeta 2 → misma animación
Tarjeta 3 → misma animación

y variar únicamente el Delay si quieres una entrada progresiva.

Utilizar tres efectos completamente diferentes puede hacer que la sección pierda coherencia visual.

Play animation

La opción:

Play animation

permite reproducir el efecto dentro del propio Editor de bloques.

Utilízala para comprobar:

• tipo de movimiento;

• duración;

• demora;

• resultado visual.

Esto facilita realizar pruebas antes de guardar.

Ejemplo práctico: animar una sección de beneficios

Supongamos que tienes:

¿POR QUÉ ELEGIRNOS?

[ Envíos ]
[ Compra segura ]
[ Atención personalizada ]

Puedes realizar el siguiente proceso:

1. selecciona la primera tarjeta;

2. ve a Avanzado;

3. abre Animate on scroll;

4. selecciona el tipo de animación;

5. configura Duration;

6. configura Delay si lo necesitas;

7. utiliza Play animation;

8. repite una configuración coherente para las demás tarjetas.

También puedes animar toda la fila

En lugar de aplicar tres animaciones independientes puedes seleccionar:

Grid Row

o el contenedor correspondiente.

De esta manera toda la estructura puede aparecer como una única unidad.

¿Cuál alternativa es mejor?

Depende del resultado.

Animar la fila completa

Genera una aparición más simple y uniforme.

Animar cada tarjeta

Permite crear una secuencia progresiva.

Ambas opciones son válidas.

Evita aplicar simultáneamente demasiadas animaciones anidadas.

Animaciones en imágenes

Puedes agregar una animación a una imagen.

Por ejemplo:

Texto            Imagen
                 ↑
            aparece al llegar

Esto puede funcionar bien en secciones de:

• Texto e imagen;

• Quiénes somos;

• Servicios;

• Portafolio.

Animaciones en títulos

También es posible animar un Heading.

Sin embargo, si título, párrafo y botón forman una misma composición, considera si resulta más coherente animar el contenedor completo.

Por ejemplo:

En lugar de:

Título → animación 1
Texto → animación 2
Botón → animación 3

puedes utilizar:

Contenedor completo → animación

Animaciones en páginas largas

En una página con muchas secciones no es necesario que todas tengan efectos.

Puedes reservar las animaciones para:

• contenido destacado;

• cambios importantes de sección;

• tarjetas principales;

• imágenes;

• llamados a la acción.

Esto ayuda a que las animaciones mantengan su efecto visual.

Revisa las animaciones en celular

Una animación que resulta agradable en computadora puede generar una experiencia diferente en una pantalla pequeña.

Después de configurarla:

1. cambia a vista móvil;

2. comprueba cómo aparece el elemento;

3. revisa el Delay;

4. revisa Duration;

5. comprueba que el contenido no tarde innecesariamente en mostrarse.

Evita retrasar información importante

Si una sección contiene información necesaria para utilizar la página, evita configuraciones que hagan que el visitante tenga que esperar demasiado para verla.

Por ejemplo:

• información de contacto;

• formulario;

• precios;

• botón principal;

• indicaciones importantes.

La animación debe complementar el contenido, no obstaculizarlo.

Parte 2: Estados de Estilo

Dentro de:

Estilo

encontrarás el selector:

State

Desde allí puedes trabajar con opciones como:

• hover;

• active;

• nth-of-type(2n).

Estas opciones permiten aplicar estilos diferentes a determinadas situaciones.

Estado normal

Cuando el selector muestra:

- State -

estás trabajando sobre el aspecto habitual del elemento.

Por ejemplo:

Botón normal

Fondo azul
Texto blanco

Hover

El estado:

hover

representa el momento en el que el visitante coloca el cursor sobre un elemento.

Es uno de los estados más utilizados para crear interacciones visuales.

Ejemplo sencillo de Hover

Botón normal:

[ VER PRODUCTOS ]

Puedes configurarlo con:

• fondo oscuro;

• texto blanco.

Luego seleccionas:

State → hover

y configuras:

• otro Background Color;

• otro Text Color.

El resultado será:

Estado normal:
[ VER PRODUCTOS ]

Cursor encima:
[ VER PRODUCTOS ]
   ↑
cambia visualmente

¿Para qué sirve Hover?

Permite comunicar que un elemento puede ser interactivo.

Es especialmente útil en:

• botones;

• enlaces;

• tarjetas clicables;

• imágenes;

• determinados íconos.

Hover en un botón

Puedes modificar propiedades como:

• Background Color;

• Text Color;

• Border;

• Opacity;

• otras propiedades disponibles desde Estilo.

Por ejemplo:

Normal

Fondo blanco.

Texto oscuro.

Borde oscuro.

Hover

Fondo oscuro.

Texto blanco.

Esto genera una respuesta visual inmediata al usuario.

Hover en una tarjeta

También puedes aplicarlo a una Card.

Por ejemplo:

Estado normal

┌─────────────────────┐
│       Servicio      │
│     Descripción     │
└─────────────────────┘

Hover

Puedes cambiar:

• fondo;

• borde;

• color;

• opacidad;

• otros estilos disponibles.

Esto puede ayudar a indicar que la tarjeta es interactiva.

Hover en imágenes

Una imagen también puede tener un estado hover.

Por ejemplo, puedes modificar:

• Opacity;

• Border;

• otros estilos disponibles.

Si necesitas efectos más avanzados, como escalado o transformaciones específicas, puede ser necesario utilizar CSS.

Hover no existe de la misma manera en pantallas táctiles

Esta aclaración es importante.

En una computadora, el usuario puede:

colocar el cursor sobre un elemento sin hacer clic.

En un celular o tablet táctil, esa interacción no funciona exactamente de la misma forma.

Por este motivo, no debes depender exclusivamente de Hover para mostrar información indispensable.

Ejemplo que conviene evitar

No es recomendable diseñar:

Tarjeta normal:
[ IMAGEN ]

Hover:
[ IMAGEN + PRECIO + BOTÓN + INFORMACIÓN IMPORTANTE ]

si esa información solamente puede descubrirse mediante Hover.

En celular, esa experiencia puede no reproducirse como esperabas.

Qué sí puede utilizarse en Hover

Utiliza Hover principalmente como refuerzo visual.

Por ejemplo:

• cambiar color del botón;

• remarcar un borde;

• cambiar fondo;

• modificar suavemente la apariencia.

La información principal debería permanecer accesible sin depender del estado.

Active

El estado:

active

representa una situación activa durante determinadas interacciones.

Su aplicación depende del tipo de componente.

Puede resultar útil para:

• botones;

• enlaces;

• elementos interactivos;

• componentes que dispongan de un estado activo.

Diferencia conceptual entre Hover y Active

Puedes pensarlo así:

Hover

El cursor se encuentra sobre el elemento.

Active

El elemento se encuentra en una situación activa relacionada con la interacción.

No todos los elementos necesitan un estilo Active.

Ejemplo en un botón

Puedes tener:

Normal

[ CONTACTAR ]

Hover

El fondo cambia al colocar el cursor.

Active

Puede utilizar otro estilo durante el estado activo de interacción.

No es obligatorio configurar todos los estados

Un botón puede funcionar perfectamente con:

• estado normal;

• Hover.

No necesitas necesariamente crear:

• Hover;

• Active;

• otros estados;

si el diseño no lo requiere.

nth-of-type(2n)

Dentro del mismo selector también aparece:

nth-of-type(2n)

Aunque Waclis lo presenta dentro de State, se trata de una opción más avanzada relacionada con la selección de determinados elementos según su posición dentro de una estructura.

Conceptualmente puede utilizarse para trabajar sobre elementos alternados.

Ejemplo conceptual

Tienes:

Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6

nth-of-type(2n) puede representar:

Elemento 1
Elemento 2 ← seleccionado por la regla
Elemento 3
Elemento 4 ← seleccionado por la regla
Elemento 5
Elemento 6 ← seleccionado por la regla

Es decir, elementos pares dentro de una determinada estructura.

¿Para qué puede ser útil?

Por ejemplo, para crear una composición alternada:

Fila 1 → fondo blanco
Fila 2 → fondo gris
Fila 3 → fondo blanco
Fila 4 → fondo gris

o aplicar determinados estilos a elementos alternos.

Es una opción avanzada

Si no necesitas crear un patrón de elementos alternados, puedes ignorarla.

No es una configuración necesaria para la edición habitual.

Además, su comportamiento depende de la estructura HTML donde se encuentre el elemento, por lo que conviene utilizarla solamente cuando comprendas qué elementos alcanzará.

Importante después de modificar un estado

Supongamos que seleccionas:

State → hover

y cambias el color.

Cuando termines, vuelve a:

- State -

antes de continuar configurando el estilo normal.

De lo contrario, podrías pensar que estás modificando el elemento habitual cuando en realidad continúas editando solamente Hover.

Ejemplo práctico: crear un botón con Hover

Queremos un botón que se vea así:

Normal

Fondo blanco.

Texto negro.

Borde negro.

Hover

Fondo negro.

Texto blanco.

Paso 1: selecciona el botón

Utiliza el área visual o Navigator.

Paso 2: configura el estado normal

Asegúrate de que State esté en:

- State -

Después modifica desde Estilo:

• Background Color;

• Text Color;

• Border;

• Border radius;

• Padding.

Paso 3: selecciona Hover

Abre:

State → hover

Paso 4: cambia los estilos

Configura:

• Background Color;

• Text Color.

Puedes mantener el mismo Border radius y dimensiones.

Paso 5: vuelve al estado normal

Selecciona nuevamente:

- State -

antes de realizar otros cambios generales.

Paso 6: prueba el resultado

Utiliza Vista previa o comprueba posteriormente mediante Ver página.

Ejemplo práctico: tarjetas interactivas

Tienes tres servicios:

[ Diseño ]
[ Desarrollo ]
[ Soporte ]

Cada tarjeta es clicable.

Puedes utilizar Hover para dar una señal visual de interacción.

Por ejemplo:

Normal

• fondo blanco;

• borde gris.

Hover

• fondo ligeramente diferente;

• borde más destacado.

La tarjeta sigue mostrando siempre:

• título;

• descripción;

• información principal.

Hover solamente aporta una respuesta visual.

Ejemplo práctico: imagen enlazada

Tienes una imagen que dirige a una categoría.

Puedes utilizar:

Normal

Opacity completa.

Hover

Una pequeña modificación de Opacity.

Esto permite indicar que la fotografía es interactiva.

Hover y Linked styles

Presta especial atención cuando varios elementos comparten una clase.

Por ejemplo:

Card 1 → .categoria-card
Card 2 → .categoria-card
Card 3 → .categoria-card

Si configuras Hover sobre esa clase, es posible que el estilo se aplique a todas las Cards.

Esto puede ser exactamente lo que quieres.

Por ejemplo:

todas las tarjetas deben tener el mismo Hover.

¿Qué ocurre si solamente quiero un Hover diferente en una tarjeta?

Necesitarás identificarla de manera específica.

Antes de modificar revisa:

• Class;

• ID;

• aviso Linked styles.

Este tema se explica en profundidad en el tutorial de clases, IDs y estilos vinculados.

Estados y elementos clonados

Cuando clonas un componente, la copia puede conservar las mismas clases.

Por ejemplo:

Botón 1 → .boton-principal
Botón 2 → .boton-principal
Botón 3 → .boton-principal

Si .boton-principal tiene un Hover definido, las copias pueden compartir ese comportamiento.

Esto ayuda a mantener consistencia.

Utiliza estados para crear un sistema visual coherente

Por ejemplo, puedes definir una lógica:

Botón principal normal

Fondo de color principal.

Texto blanco.

Botón principal Hover

Fondo más oscuro.

Botón secundario normal

Fondo transparente.

Borde de color principal.

Botón secundario Hover

Fondo principal.

Texto blanco.

Así la Página web mantiene una interacción consistente.

No crees un efecto diferente para cada botón

Si tienes diez botones con la misma función visual, es recomendable que compartan un comportamiento similar.

Esto ayuda al visitante a reconocer qué elementos son interactivos.

Animación y Hover pueden combinarse

Una misma tarjeta puede tener:

Animate on scroll

para aparecer cuando el visitante llega a ella.

y

Hover

para reaccionar después cuando el usuario coloca el cursor.

Son comportamientos diferentes y pueden convivir.

Ejemplo

El usuario llega a la sección

↓

La Card aparece con una animación

↓

El usuario mueve el cursor sobre la Card

↓

Se activa Hover

No combines demasiados efectos simultáneamente

Evita una situación como:

Entrada intensa
+
Hover intenso
+
Cambio de tamaño
+
Cambio de color
+
varias animaciones internas

si no existe una razón clara.

Una interacción sencilla suele ser más fácil de comprender.

Animaciones y rendimiento visual

Cuantos más elementos se mueven simultáneamente, más compleja puede resultar la experiencia.

Utiliza animaciones prioritariamente sobre:

• secciones principales;

• tarjetas importantes;

• imágenes destacadas;

• llamados a la acción.

Evita aplicarlas automáticamente a cada párrafo, ícono y pequeño componente de toda la Página web.

Respeta la lectura del visitante

El objetivo de una Página web continúa siendo que el visitante pueda:

• leer;

• comprender;

• navegar;

• encontrar productos;

• contactar;

• realizar acciones.

Las animaciones deben complementar esos objetivos.

Accesibilidad y movimiento

Los efectos visuales deberían evitar movimientos excesivos o innecesarios.

Especialmente en contenidos importantes:

• mantén la información visible;

• evita retrasos prolongados;

• evita depender únicamente de animaciones para comunicar algo;

• utiliza suficiente contraste en estados Hover.

Contraste en Hover

Supongamos:

Normal

Fondo rojo.

Texto blanco.

Hover

Fondo rosa muy claro.

Texto blanco.

El texto podría perder contraste.

Cada vez que cambies Background Color en Hover, comprueba también el Text Color.

No hagas desaparecer accidentalmente un elemento

Si utilizas Opacity en Hover y la reduces demasiado:

Opacity: 0

el elemento puede volverse completamente transparente al pasar el cursor.

Esto puede ser intencional en un efecto avanzado, pero normalmente no será apropiado para botones o información importante.

Revisar el resultado en Vista previa

Después de configurar estados y animaciones puedes utilizar:

Vista previa

para observar el contenido con menos controles de edición visibles.

Esto ayuda a evaluar mejor la experiencia.

Guardar Cambios

Cuando estés conforme:

1. revisa el estado normal;

2. prueba Hover;

3. comprueba Active si lo configuraste;

4. prueba las animaciones;

5. revisa desktop;

6. revisa tablet;

7. revisa celular;

8. haz clic en Guardar Cambios.

Waclis mostrará una notificación verde cuando los cambios hayan sido guardados correctamente.

Ver página

Después de guardar utiliza:

Ver página

para probar los efectos en el entorno real.

Esto es especialmente importante para:

• Hover;

• botones;

• enlaces;

• tarjetas clicables;

• animaciones al scroll;

• contenido responsive.

Prueba recorriendo realmente la página

Las animaciones on scroll deben comprobarse desplazándote por la Página web.

Por ejemplo:

1. abre la página desde arriba;

2. desplázate lentamente;

3. comprueba cuándo aparece el elemento;

4. verifica que no exista una demora excesiva;

5. vuelve a revisar en móvil.

Si una animación no se ejecuta como esperabas

Comprueba:

1. qué elemento tiene la animación;

2. Animation type;

3. Duration;

4. Delay;

5. si seleccionaste el contenedor correcto;

6. si el elemento ya se encuentra visible al cargar la página;

7. el resultado mediante Ver página.

Si Hover modifica varios elementos

Comprueba:

• Linked styles;

• Class;

• ID;

• el elemento seleccionado;

• si varios componentes comparten la misma regla.

Utiliza Deshacer si el cambio no era el esperado.

Si Hover no muestra ningún cambio visible

Comprueba que realmente hayas configurado una propiedad diferente al estado normal.

Por ejemplo:

Estado normal:

Background Color: blanco

Hover:

Background Color: blanco

Visualmente no habrá diferencia.

Puedes modificar:

• Background Color;

• Text Color;

• Border;

• Opacity;

según el elemento.

Si el efecto se ve bien en desktop pero no en móvil

Recuerda que Hover está pensado principalmente para interacciones mediante cursor.

No dependas de Hover para información necesaria.

Para animaciones on scroll, comprueba:

• Duration;

• Delay;

• tamaño del elemento;

• orden de la estructura móvil.

Cuándo utilizar CSS

Las herramientas visuales permiten configurar varios estados y animaciones sin escribir código.

Utiliza CSS cuando necesites comportamientos que no estén disponibles directamente.

Por ejemplo:

.mi-tarjeta {
    transition: transform .3s ease;
}

.mi-tarjeta:hover {
    transform: translateY(-5px);
}

Este tipo de efecto requiere una personalización mayor.

Antes de utilizar CSS, revisa las clases del elemento para evitar afectar otras estructuras accidentalmente.

Ejemplo de efecto avanzado

Quieres que una Card:

• se desplace 5 px hacia arriba;

• lo haga suavemente;

• vuelva a su lugar al retirar el cursor.

Si las opciones visuales no permiten configurar ese comportamiento, puedes recurrir a CSS.

No necesitas modificar HTML si la Card ya dispone de una clase adecuada.

Prioriza las herramientas visuales

Utiliza este orden:

1. Estilo normal.

2. State → hover / active cuando corresponda.

3. Avanzado → Animate on scroll.

4. CSS solamente si necesitas un comportamiento adicional.

Esto mantiene la configuración más fácil de administrar.

Flujo recomendado para agregar una animación

1. Selecciona el elemento.

2. Comprueba Navigator.

3. Abre Avanzado.

4. Activa/configura Animate on scroll.

5. Selecciona Animation type.

6. Ajusta Duration.

7. Ajusta Delay si es necesario.

8. Utiliza Play animation.

9. Comprueba celular.

10. Guarda.

11. Utiliza Ver página.

Flujo recomendado para crear Hover

1. Selecciona el elemento.

2. Comprueba su estado normal.

3. Abre Estilo.

4. Selecciona State → hover.

5. Modifica únicamente las propiedades necesarias.

6. Vuelve a - State -.

7. Comprueba el estado normal.

8. Utiliza Vista previa.

9. Guarda.

10. Comprueba mediante Ver página.

Errores frecuentes

Aplicar una animación a cada elemento de la página

Utiliza efectos solamente donde aporten valor.

Utilizar Delay demasiado largo

El contenido puede parecer que no cargó.

Configurar diferentes animaciones para elementos que forman un mismo grupo

Mantén una lógica visual coherente.

Animar cada elemento interno cuando querías animar toda la tarjeta

Selecciona el contenedor correcto.

Depender de Hover para mostrar información importante

En dispositivos táctiles la interacción es diferente.

Olvidar volver a - State -

Puedes continuar modificando Hover pensando que estás editando el estado normal.

Cambiar el fondo en Hover y perder contraste

Revisa también Text Color.

Crear Hover sobre una clase compartida sin revisar Linked styles

Puede afectar a varios elementos.

Configurar nth-of-type(2n) sin comprender la estructura

Es una herramienta avanzada relacionada con la posición de los elementos.

No revisar las animaciones en móvil

El comportamiento visual puede sentirse diferente en una pantalla pequeña.

Probar únicamente dentro del editor

Utiliza también Ver página.

Tabla rápida de referencia

Buenas prácticas

Recomendamos:

• mantener animaciones sencillas;

• utilizar efectos coherentes entre elementos similares;

• aplicar Delay con moderación;

• no retrasar contenido esencial;

• utilizar Hover como refuerzo visual;

• no depender de Hover para información necesaria;

• mantener suficiente contraste;

• comprobar Linked styles;

• revisar tablet y celular;

• utilizar CSS solamente cuando necesites un efecto no disponible visualmente;

• probar el resultado final fuera del editor.

En resumen

El Editor de bloques permite agregar dos grandes tipos de comportamiento visual:

Animate on scroll

Se configura desde:

Avanzado

y permite animar un elemento cuando entra en pantalla durante el desplazamiento.

Puedes configurar:

• Animation type;

• Duration;

• Delay;

• Play animation.

Estados

Se configuran desde:

Estilo → State

y permiten modificar la apariencia según una determinada situación.

Entre las opciones disponibles encontrarás:

• hover;

• active;

• nth-of-type(2n).

hover es especialmente útil para botones, enlaces y tarjetas.

active puede utilizarse en determinados elementos interactivos.

nth-of-type(2n) es una alternativa avanzada para trabajar con elementos según su posición dentro de una estructura.

La recomendación general es:

Utiliza movimiento e interacción para reforzar el diseño, no para dificultar el acceso al contenido.

Una Página web no necesita estar completamente animada para resultar moderna. Unos pocos efectos coherentes y bien aplicados suelen producir un resultado más claro y profesional.