--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/separador-de-animacao' title: 'Animar elementos ao deslocar, pairar ou clicar | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:46:57+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Qualquer secção, linha ou elemento de conteúdo pode mexer-se. Esbata um título de baixo para cima à medida que entra na vista, deixe um botão seguir um momento depois, ou faça um ícone pulsar ao pairar. Cada um tem um painel Animation nas definições. O exemplo esbate um título e depois um botão de registo após um pequeno atraso. O vídeo esbate um botão e um título à medida que a secção entra na vista. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Animar elementos ao deslocar, pairar ou clicar' description: |- Qualquer secção, linha ou elemento de conteúdo pode mexer-se. Esbata um título de baixo para cima à medida que entra na vista, deixe um botão seguir um momento depois, ou faça um ícone pulsar ao pairar. Cada um tem um painel Animation nas definições. O exemplo esbate um título e depois um botão de registo após um pequeno atraso. O vídeo esbate um botão e um título à medida que a secção entra na 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:46:57+0000' dateModified: '2026-10-24T17:19:22+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/pt-pt/hc/documentacao/aprender-dxpr-builder/design/separador-de-animacao' articleSection: 'Guias de design' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/separador-de-animacao' description: |- Qualquer secção, linha ou elemento de conteúdo pode mexer-se. Esbata um título de baixo para cima à medida que entra na vista, deixe um botão seguir um momento depois, ou faça um ícone pulsar ao pairar. Cada um tem um painel Animation nas definições. O exemplo esbate um título e depois um botão de registo após um pequeno atraso. O vídeo esbate um botão e um título à medida que a secção entra na vista. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) /[Guias de design](/pt-pt/hc/documentation/learn-dxpr-builder/design/overview) # Animar elementos ao deslocar, pairar ou clicar. Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design ## Neste guia Guias relacionados - [Tornar os elementos reativos ao pairar](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/efeitos-ao-pairar) - [Dar a uma secção uma cor, foto ou gradiente de fundo](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/fundos) - [Adicionar um esquema de carrossel](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/esquema-de-carrossel) Qualquer secção, linha ou elemento de conteúdo pode mexer-se. Esbata um título de baixo para cima à medida que entra na vista, deixe um botão seguir um momento depois, ou faça um ícone pulsar ao pairar. Cada um tem um painel **Animation** nas definições. O exemplo esbate um título e depois um botão de registo após um pequeno atraso. O vídeo esbate um botão e um título à medida que a secção entra na vista. ## Esbater um título e um botão 1. Clique em **Add Elements** na área de conteúdo vazia e escolha **Section** no separador **Layout**. 2. Paire sobre a secção e abra **More > Settings**. 3. Em **HTML classes**, escolha **Align text center** e clique em **Save**. 4. Clique em **+** na secção e escolha **Button** no separador **Content**. As definições abrem. 5. Escreva `Register now` em **Title** e `/register` em **Link**. 6. Abra o painel **Animation** e defina **Animation start** como **On appear**. 7. Defina **Animation in** como **fadeInUp**. 8. Em **Hidden**, marque **Before in-animation**. 9. Defina **In-delay** como 600 e clique em **Save**. 10. Clique em **+** na secção outra vez e escolha **Text** no separador **Content**. Fica acima do botão. 11. Escreva um título, por exemplo `Open day 2026`, e defina-o como **Heading 2** na barra de ferramentas do editor. 12. Abra o painel **Animation**. Escolha **On appear**, **fadeInUp** e **Before in-animation**, como no botão. 13. Defina **Duration** como 800 e clique em **Save**. 14. Clique em **Save** na barra de ferramentas. 15. Abra o menu de vista (o ícone de olho na barra de ferramentas) e escolha **Preview**. ## Mais efeitos para experimentar - **Scroll reveal:** **On appear**, **fadeInUp**, **Before in-animation** e uma **Duration** de 800. - **Staggered cards:** o mesmo efeito em três cartões, com um **In-delay** de 0, 200 e 400. - **Attention pulse:** **On appear**, **pulse**, **Infinite** ligado e uma **Duration** de 1500. - **Hover pulse:** **On hover**, **pulse** e um **Parent number** de 0, para só o próprio elemento reagir. - **Tab reveal:** **On trigger** e **fadeIn** nos elementos dentro de um separador. Tocam sempre que o separador abre. ## O que vê Ao guardar o texto, o editor toca ambos os efeitos: o título esbate-se de baixo para cima ao longo de 800 milissegundos e o botão segue 600 milissegundos depois. Os visitantes veem o mesmo à medida que a secção entra na vista, uma vez por carregamento de página. Ambos ficam invisíveis até o efeito começar, porque **Before in-animation** está marcado. ## Definições | Setting | What it does | Default | |---|---|---| | **Animation start** | Quando o efeito toca: **On appear** (deslocado para a vista), **On hover**, **On click** ou **On trigger** (quando o slide do carrossel, o separador ou o interrutor que contém o elemento abre) | **No animation** | | **Animation in** | O efeito de entrada: esbatimentos, deslizamentos, aproximações, voltas e efeitos de chamada de atenção como bounce, pulse e shake | **No animation** | | **Animation out** | O efeito de saída, da mesma lista. Aparece apenas para **On hover** e **On trigger**. | **No animation** | | **Hidden** | **Before in-animation** mantém o elemento invisível até o efeito tocar. **After in-animation** esconde-o quando o efeito termina. | Neither | | **Infinite** | Repete o efeito sem fim | Off | | **Appear boundary** | Para **On appear**: a que distância abaixo do ecrã o efeito começa, em percentagem da altura do ecrã. 0 inicia-o quando o elemento entra na vista; 100 inicia-o uma altura de ecrã antes. | 100 | | **Duration** | Duração do efeito, de 0 a 3000 milissegundos | 1000 | | **In-delay** | Espera antes da entrada tocar, até 10000 milissegundos | 0 | | **Out-delay** | Espera antes da saída tocar, até 10000 milissegundos | 0 | | **Parent number** | Para **On hover** e **On click**: em que elemento o visitante aponta ou clica. 0 é o próprio elemento, 1 o elemento pai, 2 o pai do pai. | 1 | As colunas não têm painel **Animation**. Também não têm os separadores, interrutores e slides individuais dentro dos elementos de esquema. Anime o elemento dentro deles. ## Se a animação não aparece - **The element never appears.** **Before in-animation** esconde-o até o efeito tocar, mas **Animation in** está em **No animation**. Escolha um efeito em **Animation in**. - **The effect played once and stopped.** **On appear** toca uma vez por carregamento de página. Recarregue a página para ver outra vez, ou ligue **Infinite** para um efeito que repete. - **The effect starts before the visitor reaches the element.** **Appear boundary** está alto: em 100, o efeito começa uma altura de ecrã antes de o elemento entrar na vista. Defina-o como 0 no painel **Animation**. - **Hovering near the element starts the effect.** **Parent number** é 1, por isso o elemento pai escuta o ponteiro. Defina **Parent number** como 0. ## O que se segue? - [Efeitos de pairar](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/efeitos-ao-pairar): mude cores, sombras ou opacidade enquanto o ponteiro descansa sobre um elemento. - [Fundos](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/fundos): dê à secção animada uma cor, uma foto ou um gradiente. - [Esquema de carrossel](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/esquema-de-carrossel): toque efeitos **On trigger** sempre que um slide abre.