Animationen

Um Animationen in Google Web Designer zu erstellen, bestimmen Sie Keyframes zu gewissen Zeitpunkten. Legen Sie für jeden Keyframe die CSS-Eigenschaften des animierten Elements fest. Das Element ändert sich dann schrittweise und nimmt während des Übergangs vom vorherigen Keyframe die gewünschten Eigenschaften an.

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 Elements animiert wird.

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

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

Animationsmodi

Wählen Sie bei der Arbeit mit Animationen einen von zwei Modi aus: Schnellmodus und Erweiterter Modus. Sie können jederzeit zwischen den Modi wechseln.

  • Im Schnellmodus bauen Sie die Animation Szene für Szene auf, 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 hintereinander dargestellt.
  • Komplexere Animationen sind im erweiterten Modus möglich. Damit können Sie die einzelnen Elemente separat animieren. Jedes Element hat seine eigene Ebene auf der Zeitachse und Keyframe-Markierungen sind entsprechend ihrem Timing entlang der Zeitachse angeordnet.
War das hilfreich?
Wie können wir die Seite verbessern?