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

# Personalizar las animaciones de bloque

> Aprende a agregar animaciones a tus bloques para crear un efecto visual cuando un visitante abre tu página.

Aprende a agregar Animaciones a tus Bloques para crear un efecto visual cuando un visitante abre tu página.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/1f7hyov9yp" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Agregar animaciones a tu bloque

Las Animaciones pueden darle mucha personalidad a tu página. Con las Animaciones, agrega movimiento a cada Bloque individual mientras la página carga y se desplaza.

Selecciona el tipo, dirección, retraso y duración de tu animación.

* Abre la pestaña **Website** desde tu Dashboard.
* Selecciona la pestaña **Pages**.
* Abre el editor de páginas de tu Página. [Aprende más](/es/articles/website/pages/how-to-get-to-the-page-editor)
* Pasa el cursor sobre el bloque que quieres personalizar y haz clic en **Edit**.
* Ve a la barra lateral y ubica tu Configuración de Bloque.
* Haz clic en **Animations** para acceder a la Configuración de Animación del Bloque
* Asegúrate de hacer clic en **Save** para guardar y aplicar tus cambios:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/vg8y609ihu" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Identifica fácilmente los bloques con la configuración de animación activada al personalizar tu página

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/b8766ced_16802769260699.png" alt="Bloque con Animación Activada" />

***

## Configuración de animación

### Tipos de animación

* **None**: selecciona para desactivar las Animaciones
* [Fade](#fade)
* [Flip](#flip)
* [Zoom](#zoom)

### Fade

Haz que tu Bloque aparezca con un desvanecido en la página cuando un visitante se desplace hasta el Bloque:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/nxdfg84xnc" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Flip

Haz que tu Bloque gire al aparecer en la página cuando un visitante se desplace hasta el Bloque:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/3aoo0jl1pb" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Zoom

Haz que tu Bloque haga zoom al aparecer en la página cuando un visitante se desplace hasta el Bloque:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/lwx3etpbev" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Dirección

Selecciona la dirección de la Animación del elemento:

* Arriba
* Abajo
* Izquierda
* Derecha

### Retraso de animación

La cantidad de segundos antes de que el elemento comience su Animación una vez que un visitante llega al Bloque.

<Tip>
  **Consejo:** Ten en cuenta el Retraso de Animación; las Animaciones deben tener un tiempo entre 100ms y 1 segundo (el "punto óptimo"), donde los usuarios puedan reconocer la animación sin confusión y sean guiados sin problemas a través del flujo de tu landing page.
</Tip>

### Duración de animación

La cantidad de segundos que durará la animación.

Esto puede cambiar cómo aparece tu Animación. Dependiendo de la cantidad de segundos seleccionada, tu Animación puede aparecer rápida o lentamente cuando tu visitante se desplaza hasta el Bloque.