Sobre as animações

No Google Web Designer, é possível criar animações usando frames-chave que determinam os pontos iniciais e finais da animação. Você define as propriedades de um elemento animado a cada frame-chave, e o Google Web Designer lida com a interpolação (ou a transição) entre esses frames.

Exemplo:

1. No primeiro frame-chave, você tem um retângulo vermelho ao lado esquerdo da página.
2. No segundo, dois segundos depois, você altera as propriedades de cor e posição do retângulo para que ele fique azul e esteja no lado direito da página.

O Google Web Designer gera uma animação com a mudança gradual de cor por tons de roxo e o movimento pela página.

Com CSS, é possível animar os elementos HTML existentes, mas não é possível adicionar ou remover elementos. Em vez disso, você tem a opção de ocultar e exibir elementos animando a propriedade visibility do elemento.

Como as animações são criadas com CSS, é possível usar diversas sequências de animação para janelas de visualização de tamanhos diferentes com as ferramentas de design responsivo.

Modos para criar animações

Escolha entre dois modos de animação: Modo rápido e Modo avançado. É possível ir de um para outro a qualquer momento.

Modo rápido Você cria a animação cena por cena, adicionando uma nova visualização de toda a página e alterando todos os elementos que quiser animar. A linha do tempo exibe as miniaturas de cada cena em sequência, como um storyboard. Saiba mais

Modo avançado Você pode animar elementos individualmente para animações mais complexas. Cada elemento tem a própria camada na linha do tempo, e os marcadores de frame-chave aparecem posicionados ao longo da linha de acordo com o próprio tempo. Saiba mais

Limitações relativas a anúncios HTML para AMP

Só é possível animar as seguintes propriedades CSS dos anúncios HTML para AMP:

• transform (permite mover, girar, redimensionar e inclinar elementos)
• opacity
• visibility