---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/animation-tab'
title: 'Anima elementos al desplazar, en hover o al hacer clic | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:17:32+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Puedes hacer que una sección, una fila o cualquier elemento de contenido se mueva. Funde un encabezado hacia arriba cuando entra en vista, deja que un botón lo siga un momento después, o pulsa un icono en hover. Cada uno tiene un panel Animation en sus ajustes. El ejemplo funde un encabezado, y luego un botón de inscripción tras una corta espera.
  El vídeo funde un botón y un encabezado cuando la sección entra en vista.
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T11:17:32+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Anima elementos al desplazar, en hover o al hacer clic'
      description: |-
        Puedes hacer que una sección, una fila o cualquier elemento de contenido se mueva. Funde un encabezado hacia arriba cuando entra en vista, deja que un botón lo siga un momento después, o pulsa un icono en hover. Cada uno tiene un panel Animation en sus ajustes. El ejemplo funde un encabezado, y luego un botón de inscripción tras una corta espera.
        El vídeo funde un botón y un encabezado cuando la sección entra en vista.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:17:32+0000'
      dateModified: '2026-10-24T11:17:32+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/animation-tab'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/animation-tab'
      description: |-
        Puedes hacer que una sección, una fila o cualquier elemento de contenido se mueva. Funde un encabezado hacia arriba cuando entra en vista, deja que un botón lo siga un momento después, o pulsa un icono en hover. Cada uno tiene un panel Animation en sus ajustes. El ejemplo funde un encabezado, y luego un botón de inscripción tras una corta espera.
        El vídeo funde un botón y un encabezado cuando la sección entra en vista.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Anima elementos al desplazar, en hover o al hacer clic.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Haz que los elementos reaccionen en hover](/es/hc/documentation/learn-dxpr-builder/design/hover-effects)
- [Dale a una sección un fondo de color, foto o degradado](/es/hc/documentation/learn-dxpr-builder/design/backgrounds)
- [Añade un diseño de carrusel](/es/hc/documentation/learn-dxpr-builder/layout/carousel-layout)

Puedes hacer que una sección, una fila o cualquier elemento de contenido se mueva. Funde un encabezado hacia arriba cuando entra en vista, deja que un botón lo siga un momento después, o pulsa un icono en hover. Cada uno tiene un panel **Animation** en sus ajustes. El ejemplo funde un encabezado, y luego un botón de inscripción tras una corta espera.

El vídeo funde un botón y un encabezado cuando la sección entra en vista.

  ## Funde un encabezado y un botón

1. Haz clic en **Add Elements** en el área de contenido vacía y escoge **Section** en la pestaña **Layout**.
2. Pasa sobre la sección y abre **More > Settings**.
3. En **HTML classes**, escoge **Align text center** y haz clic en **Save**.
4. Haz clic en **+** en la sección y escoge **Button** en la pestaña **Content**. Se abren sus ajustes.
5. Escribe `Register now` en **Title** y `/register` en **Link**.
6. Abre el panel **Animation** y fija **Animation start** en **On appear**.
7. Fija **Animation in** en **fadeInUp**.
8. En **Hidden**, marca **Before in-animation**.
9. Fija **In-delay** en 600 y haz clic en **Save**.
10. Haz clic en **+** en la sección de nuevo y escoge **Text** en la pestaña **Content**. Cae sobre el botón.
11. Escribe un encabezado, como `Open day 2026`, y fíjalo en **Heading 2** en la barra del editor.
12. Abre el panel **Animation**. Elige **On appear**, **fadeInUp** y **Before in-animation**, como para el botón.
13. Fija **Duration** en 800 y haz clic en **Save**.
14. Haz clic en **Save** en la barra.
15. Abre el menú de vista (el icono de ojo en la barra) y elige **Preview**.

## Más efectos para probar

- **Scroll reveal:** **On appear**, **fadeInUp**, **Before in-animation** y una **Duration** de 800.
- **Staggered cards:** el mismo efecto en tres tarjetas, con un **In-delay** de 0, 200 y 400.
- **Attention pulse:** **On appear**, **pulse**, **Infinite** activado y una **Duration** de 1500.
- **Hover pulse:** **On hover**, **pulse** y un **Parent number** de 0, para que solo el propio elemento reaccione.
- **Tab reveal:** **On trigger** y **fadeIn** en los elementos dentro de una pestaña. Se reproducen cada vez que se abre la pestaña.

## Lo que ves

Cuando guardas el texto, el editor reproduce ambos efectos: el encabezado se funde hacia arriba en 800 milisegundos y el botón lo sigue 600 milisegundos después. Las visitas ven lo mismo cuando la sección entra en vista, una vez por carga de página. Ambos quedan invisibles hasta que empieza su efecto, porque **Before in-animation** está marcado.

## Ajustes

| Ajuste | Qué hace | Predeterminado |
|---|---|---|
| **Animation start** | Cuándo se reproduce el efecto: **On appear** (entra en vista), **On hover**, **On click** u **On trigger** (cuando se abre el slide de carrusel, pestaña o toggle que contiene el elemento) | **No animation** |
| **Animation in** | El efecto de entrada: fundidos, deslizamientos, zooms, giros y efectos de atención como bounce, pulse y shake | **No animation** |
| **Animation out** | El efecto de salida, de la misma lista. Se muestra solo para **On hover** y **On trigger**. | **No animation** |
| **Hidden** | **Before in-animation** mantiene el elemento invisible hasta que se reproduce su efecto. **After in-animation** lo oculta cuando termina el efecto. | Ninguno |
| **Infinite** | Repite el efecto sin fin | Desactivado |
| **Appear boundary** | Para **On appear**: a qué distancia bajo la pantalla empieza el efecto, en porcentaje de la altura de pantalla. 0 lo inicia cuando el elemento entra en vista; 100 lo inicia una altura de pantalla antes. | 100 |
| **Duration** | Duración del efecto, de 0 a 3000 milisegundos | 1000 |
| **In-delay** | Espera antes de que se reproduzca la entrada, hasta 10000 milisegundos | 0 |
| **Out-delay** | Espera antes de que se reproduzca la salida, hasta 10000 milisegundos | 0 |
| **Parent number** | Para **On hover** y **On click**: a qué elemento apunta la visita o hace clic. 0 es el propio elemento, 1 su padre, 2 el padre del padre. | 1 |

Las columnas no tienen panel **Animation**. Tampoco las pestañas, toggles y slides sueltos dentro de elementos de diseño. Anima el elemento dentro de ellos.

## Si no ves la animación

- **The element never appears.** **Before in-animation** lo oculta hasta que se reproduce su efecto, pero **Animation in** es **No animation**. Escoge un efecto en **Animation in**.
- **El efecto se reprodujo una vez y se detuvo.** **On appear** se reproduce una vez por carga de página. Recarga la página para verlo de nuevo, o activa **Infinite** para un efecto que se repite.
- **El efecto empieza antes de que la visita llegue al elemento.** **Appear boundary** está alto: en 100, el efecto empieza una altura de pantalla antes de que el elemento entre en vista. Fíjalo en 0 en el panel **Animation**.
- **Pasar el cursor cerca del elemento inicia el efecto.** **Parent number** es 1, así que el padre escucha el puntero. Fija **Parent number** en 0.

## ¿Qué sigue?

- [Efectos hover](/hc/documentation/learn-dxpr-builder/design/hover-effects): cambia colores, sombras u opacidad mientras el puntero descansa en un elemento.
- [Fondos](/hc/documentation/learn-dxpr-builder/design/backgrounds): dale a la sección animada un color, una foto o un degradado.
- [Diseño de carrusel](/hc/documentation/learn-dxpr-builder/layout/carousel-layout): reproduce efectos **On trigger** cada vez que se abre un slide.