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:
- No primeiro frame-chave, você tem um retângulo vermelho ao lado esquerdo da página.
- 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ápidoVocê 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çadoVocê 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)opacityvisibility