> ## Documentation Index
> Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Animaciones de entrada para secciones, filas y columnas

> Anima bloques completos de tu página con orden automático, ajustes de tiempo y control para móvil.

Las animaciones de entrada te permiten animar bloques completos de tu página (secciones, filas y columnas) en lugar de animar cada elemento por separado. Aplicas una animación a un bloque y todo lo que contiene entra junto cuando el visitante lo ve al hacer scroll. El creador ordena las animaciones automáticamente, así tu página se revela de forma cuidada y profesional sin que tengas que calcular retrasos ni escribir CSS.

## Cómo funcionan

Cuando un bloque aparece en pantalla, su animación se reproduce sola. El creador sigue un orden jerárquico: primero la sección, después sus filas, luego sus columnas y por último los elementos. Cada bloque espera a que termine el de nivel superior antes de empezar.

Los bloques siguen visibles después de animarse, y el contenido que espera su turno se mantiene en su estado normal en lugar de desaparecer. Así el visitante nunca ve espacios en blanco ni parpadeos.

## Ventajas

* **Sin calcular retrasos:** el orden es automático, incluso si agregas, quitas o reordenas bloques.
* **Revelado coherente:** animas una sección, fila o columna entera en un solo paso.
* **Se activa con el scroll:** nada se anima fuera de la pantalla.
* **Control móvil por bloque:** las animaciones están apagadas en celulares por defecto y tú decides en qué bloques activarlas.
* **Corrección automática en páginas publicadas:** el orden se ajusta al mostrar la página, sin volver a guardar.

## Animaciones disponibles

Hay decenas de animaciones organizadas por categorías, cada una con variantes de dirección o estilo:

| Categoría | Variantes | Efecto |
| - | - | - |
| Aparecer (Fade) | Entrada, arriba, abajo, izquierda, derecha | El bloque aparece gradualmente mientras se desliza desde esa dirección. |
| Deslizar (Slide) | Arriba, abajo, izquierda, derecha | El bloque entra desde fuera de la pantalla. |
| Rebotar (Bounce) | Entrada, arriba, abajo, izquierda, derecha | El bloque llega a su sitio con un rebote elástico. |
| Girar en eje (Flip) | Flip, Flip en X, Flip en Y | El bloque gira sobre su eje horizontal o vertical. |
| Rotar (Rotate) | Entrada | El bloque gira en sentido horario mientras aparece. |
| Zoom | Entrada | El bloque crece desde un tamaño menor mientras aparece. |
| Velocidad de la luz (Light Speed) | Izquierda, derecha | El bloque entra deslizándose con un efecto de inclinación. |
| Bucle infinito | Brillo, balanceo, rebote | El bloque repite la animación continuamente después de entrar. Ideal para llamadas a la acción. |

## Ajustes de la animación

| Ajuste | Rango | Para qué sirve |
| - | - | - |
| **Duración** | 0.1 a 3 segundos | Cuánto tarda la animación en completarse. |
| **Retraso** | 0 a 5 segundos | Cuánto espera antes de empezar, además del orden automático. |
| **Escala** | 0.5× a 2× | Tamaño inicial en los efectos de zoom. |
| **Aceleración** (Easing) | Lineal, entrada suave, salida suave, entrada y salida suaves | La curva de velocidad de la animación. |

## Cómo aplicar una animación de entrada

**1. Selecciona un bloque**

Haz clic en una sección, fila o columna del lienzo. Verás su contorno con los controles de tamaño.

**2. Abre la pestaña Animaciones**

En la barra lateral derecha, haz clic en **Animaciones** y despliega **Animación de entrada**.

**3. Previsualiza las opciones**

Pasa el cursor sobre cualquier tarjeta de animación: se reproduce al instante en el bloque seleccionado. Al retirar el cursor, la vista previa desaparece. Así comparas varias antes de decidir.

**4. Elige la animación**

Haz clic en la tarjeta que quieres aplicar. Quedará asignada al bloque.

**5. Ajusta los valores**

Configura duración, retraso, escala y aceleración con los controles.

**6. Guarda y publica**

Haz clic en **Guardar**, arriba a la derecha, y publica la página. La animación se reproducirá cuando el visitante llegue a ese bloque.

## Animaciones en celulares

Por defecto, las animaciones de entrada están **desactivadas en celulares**. Así las páginas móviles cargan rápido y no distraen al visitante.

Para activarlas en un bloque concreto, enciende **Activar animaciones en móvil** en la pestaña **Animaciones** de esa sección, fila o columna. Si lo dejas apagado, el bloque aparece de inmediato en el celular, sin animación.

El creador recalcula el orden en móvil teniendo en cuenta los bloques sin animación. Por ejemplo, si una sección se anima en móvil pero la fila que contiene no, la fila aparece de inmediato y el siguiente bloque espera a que termine la sección. El orden se mantiene correcto en todos los dispositivos.

> [!TIP]
>
> Activa la animación en móvil solo en las secciones más importantes, como la portada o la llamada a la acción principal. Tendrás impacto visual sin sacrificar velocidad.

## Preguntas frecuentes

> **¿Puedo animar elementos sueltos dentro de una sección o fila?**
>
> Sí. Puedes animar secciones, filas, columnas y elementos individuales. Si animas un bloque y un elemento dentro de él, el elemento espera a que termine el bloque.

> **¿Qué pasa si agrego una fila nueva entre dos filas animadas?**
>
> El creador la inserta en la secuencia automáticamente: espera a la fila de arriba, se anima y luego empieza la de abajo.

> **¿Funcionan en páginas que ya estaban publicadas?**
>
> Sí. El orden se corrige solo al mostrar la página, sin necesidad de volver a guardarla. Las animaciones que ya tenías en elementos se ordenan junto con las nuevas.

> **¿Puedo previsualizar antes de aplicar?**
>
> Sí. Pasa el cursor por cualquier tarjeta de animación y se reproducirá en el bloque seleccionado.

> **¿Qué pasa con los bloques que esperan su turno?**
>
> Se muestran en su estado normal. No desaparecen ni quedan invisibles mientras esperan.

> **¿Funcionan con plantillas de elemento guardadas?**
>
> Sí. Si colocas una plantilla dentro de un bloque animado, el elemento espera a que termine la animación de su bloque.

> **¿Puedo usar animaciones distintas en cada bloque?**
>
> Sí. Cada sección, fila y columna puede tener su propia animación, duración, retraso, escala y aceleración. El orden jerárquico se respeta igual.

## Artículos relacionados

> **[Personalizar animaciones](https://help.chateea.com/docs/sitios/personalizar-animaciones.md)**
>
> Anima elementos individuales de tus páginas.

> **[Animaciones de texto, imágenes y botones](https://help.chateea.com/docs/sitios/animaciones-de-texto-imagenes-y-botones.md)**
>
> Efectos para elementos concretos.

> **[Diseños anidados](https://help.chateea.com/docs/sitios/disenos-anidados.md)**
>
> Organiza secciones, filas y columnas.

> **[Versión para escritorio y móvil](https://help.chateea.com/docs/sitios/version-para-escritorio-y-movil.md)**
>
> Ajusta tu página para cada dispositivo.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.