Informazioni sulle animazioni

Puoi creare animazioni in Google Web Designer utilizzando fotogrammi chiave, che definiscono i punti di inizio e fine di un'animazione. Puoi impostare le proprietà di un elemento animato in ogni fotogramma chiave e Web Designer gestisce il tweening o la transizione tra i fotogrammi chiave.

Ad esempio:

1. Nel primo fotogramma chiave è presente un rettangolo rosso sul lato sinistro della pagina.
2. Nel secondo fotogramma chiave, due secondi dopo, modifichi le proprietà di colore e posizione del rettangolo in modo che diventi blu e appaia sul lato destro della pagina.

Web Designer genera un'animazione in cui il colore cambia gradualmente, passando attraverso le sfumature del viola, e il movimento viene visualizzato sulla pagina.

CSS consente di animare gli elementi HTML esistenti, ma non di aggiungere o rimuovere elementi. Piuttosto, puoi nascondere e mostrare gli elementi animando la proprietà visibility dell'elemento.

Poiché le animazioni vengono create tramite CSS, puoi utilizzare diverse sequenze di animazione per aree visibili di dimensioni diverse quando utilizzi gli strumenti di responsive design.

Modalità per la creazione di animazioni

Puoi scegliere tra due modalità di animazione: modalità veloce e modalità avanzata. Puoi passare da una modalità all'altra in qualsiasi momento.

Modalità veloce Puoi creare l'animazione scena per scena, aggiungendo una nuova visualizzazione dell'intera pagina e modificando tutti gli elementi che vuoi animare. La sequenza temporale ti mostra le miniature di ciascuna scena in sequenza, come uno storyboard. Ulteriori informazioni.

Modalità avanzata Puoi animare gli elementi individualmente per animazioni più complesse. Ciascun elemento ha il suo livello sulla sequenza temporale e gli indicatori dei fotogrammi chiave sono disposti lungo la sequenza temporale in base alla rispettiva durata. Ulteriori informazioni.

Limitazioni per gli annunci HTML AMP

Solo le seguenti proprietà CSS possono essere animate negli annunci HTML AMP:

• transform (consente di spostare, ruotare, ridimensionare e inclinare gli elementi)
• opacity
• visibility