Exibir animações em loop

Exibir uma animação em loop faz com que ela se repita. Para usar esse recurso, acesse o Modo avançado. É possível repetir a animação de cada elemento separadamente ou fazer um loop de uma animação mais complexa envolvendo vários deles.

Repetir a animação de um único elemento

Os frames-chave em loop são exibidos como cópias translúcidas na linha do tempo. No exemplo abaixo, o elemento red-div tem uma animação de 0,5 segundo de duração que se repete quatro vezes no total.

Para visualizar a animação em loop no cenário, clique em Reproduzir na linha do tempo.

Repetir a animação de vários elementos

Você pode adicionar um evento para exibir todas as animações da página em loop, especificando o início e o término da repetição.

1. Defina um rótulo no ponto da linha do tempo em que você quer que o loop da animação comece:
   1. Clique com o botão direito do mouse na faixa Eventos (a primeira da linha do tempo) no ponto em que você quer que a animação comece a se repetir e selecione Adicionar rótulo… no menu pop-up.
   2. Digite um nome como loopStart na caixa de diálogo pop-up.
   3. Pressione Enter.
2. Clique com o botão direito no ponto da faixa Eventos em que você quer encerrar o loop da animação e selecione Adicionar evento no menu pop-up.
   
3. Clique duas vezes no marcador de evento para fazer a configuração:
   1. Para a Ação, escolha:
      • Linha do tempo > gotoAndPlay para um loop infinito;
      • Linha do tempo > gotoAndPlayNTimes para um número específico de repetições.
   2. Em Destinatário, escolha a página.
   3. Para a Configuração, selecione o rótulo que você criou antes (por exemplo, loopStart) e defina o número desejado de repetições.

Use o botão Visualizar para testar a animação em loop no navegador.