Animationen

Animationen werden in Google Web Designer mithilfe von Keyframes erstellt, die den Start- und den Endpunkt der jeweiligen Animation definieren. Dazu legen Sie für jeden Keyframe die Eigenschaften des animierten Elements fest. Google Web Designer erstellt dann den Übergang zwischen den Keyframes.

Beispiel:

1. Beim ersten Keyframe befindet sich links auf der Seite ein rotes Rechteck.
2. Für den zweiten Keyframe, zwei Sekunden später, ändern Sie die Farbe und die Position des Rechtecks, sodass es blau ist und rechts auf der Seite angezeigt wird.

Google Web Designer erstellt eine Animation, bei der das Rechteck auf der Seite verschoben wird und sich seine Farbe schrittweise verändert, wobei sie verschiedene Violettschattierungen durchläuft.

Mit CSS können bestehende HTML-Elemente animiert, jedoch keine Elemente hinzugefügt oder entfernt werden. Stattdessen lassen sich Elemente verbergen bzw. anzeigen, indem die Eigenschaft visibility des jeweiligen Elements animiert wird.

Da Animationen mithilfe von CSS erstellt werden, können Sie mit den Tools für responsives Webdesign verschiedene Animationssequenzen für unterschiedlich große Darstellungsbereiche erzeugen.

Modi zum Erstellen von Animationen

Ihnen stehen zwei Animationsmodi zur Verfügung: der Schnellmodus und der erweiterte Modus. Sie können jederzeit zwischen den Modi wechseln.

Schnellmodus Sie erstellen die Animation Szene für Szene, indem Sie jeweils eine neue Ansicht der Gesamtseite hinzufügen und die zu animierenden Elemente ändern. In der Zeitachse werden wie in einem Storyboard die Miniaturansichten aller Szenen nacheinander dargestellt. Weitere Informationen

Erweiterter Modus Für komplexere Animationen können Sie Elemente einzeln animieren. Jedes Element hat seine eigene Ebene auf der Zeitachse und Keyframe-Markierungen sind entsprechend ihrem Timing entlang der Zeitachse angeordnet. Weitere Informationen

Einschränkungen bei AMPHTML-Anzeigen

Nur die folgenden CSS-Eigenschaften können in AMPHTML-Anzeigen animiert werden:

• transform (Elemente können verschoben, gedreht, skaliert und verdreht werden)
• opacity
• visibility