Editor do Wix Studio: adicionar uma animação em loop

4 min de leitura
Crie uma sensação de movimento em seu design com animações que se repetem continuamente. Você pode adicionar uma animação em loop a qualquer elemento que deseja que atrair a atenção dos visitantes. Algumas são mais sutis e outras chamam mais atenção.
Um exemplo de um elemento de máscara de texto com uma animação em loop em um site online
Neste artigo, saiba mais sobre como:
Dica:
Ao adicionar uma animação no breakpoint do desktop, ela é replicada para os breakpoints menores. No entanto, você pode definir uma animação diferente ou personalizar a mesma animação em cada breakpoint.  

Adicionar uma animação em loop

Você pode adicionar uma animação em loop a elementos e seções específicos ou à página do site como um todo.

Adicionar uma animação em loop

  1. Selecione o elemento ou seção relevante.
  2. Clique na seta Abrir inspetor  no canto superior direito do Editor.
  3. Clique na aba Interações .
  4. Clique em + Adicionar abaixo de Loop.
  5. Selecione uma animação da lista.
    Dica: passe o mouse sobre as animações para ver como elas ficam. 
Um GIF mostrando as animações em loop disponíveis e como passar o mouse sobre elas para visualizar

Personalizar uma animação em loop

Depois de escolher uma animação, configure-a para se comportar da maneira que você deseja. Escolha quanto tempo dura a animação, defina a intensidade, adicione um atraso entre as repetições e mais. 

Para personalizar uma animação em loop:

  1. Selecione o elemento, seção ou página relevante.
  2. Clique na seta Abrir inspetor  no canto superior direito do Editor.
  3. Clique na aba Interações .
  4. Clique na animação que você deseja alterar. 
  5. Clique em Ajustar animação para alterar suas configurações:
    • Direção: escolha a direção de onde a animação deve vir (por exemplo: da esquerda, de cima). 
    • Intensidade: torne essa animação mais sutil ou mais intensa. 
    • Duração: altere a duração da animação.
    • Atraso na repetição: adicione um atraso (em segundos) entre as repetições infinitas da animação.   
    • Easing: escolha a forma gradual com que a animação deve aparecer e/ou desaparecer. 
Observação:
As configurações disponíveis dependem da animação que você escolher.
Uma captura de tela das opções de ajuste disponíveis para a animação Respirar

Remover uma animação em loop

Você pode remover uma animação em loop a qualquer momento no painel Inspetor. 

Para remover uma animação em loop:

  1. Selecione o elemento, seção ou página relevante.
  2. Clique na seta Abrir inspetor  no canto superior direito do Editor.
  3. Clique na aba Interações .
  4. Passe o mouse sobre a animação e clique no ícone Mais ações .
  5. Clique em Remover.
Removendo uma animação em loop do painel Inspetor

Esse artigo foi útil?

|