Sie können auf der Zeitachse erstellte Animationen durch Bearbeiten der animierten Elemente, durch Ändern der Keyframes und Spannen oder durch Wiedergabe als Schleife anpassen.
Themen in diesem Artikel:
Animierte Elemente bearbeiten
Wenn Sie die Eigenschaften eines animierten Elements ändern, wird an der Position des Abspielkopfs automatisch ein Keyframe hinzugefügt, wenn sich dort nicht bereits ein Keyframe befindet. Sie können auch einen vorhandenen Keyframe auswählen, um das Element an diesem bestimmten Punkt auf der Zeitachse zu bearbeiten. Animationen, die sich vor oder hinter diesem Punkt befinden, beginnen bzw. enden mit den geänderten Eigenschaften.
Wenn Sie am ersten Keyframe Eigenschaften ändern, bearbeiten Sie dadurch die Basiseigenschaften des Elements. Für nachfolgende Keyframes werden die Basiseigenschaften automatisch übernommen, außer Sie legen für diese Keyframes andere Eigenschaften fest.
Wenn Sie mehrere Keyframes auswählen und die Eigenschaften des Elements bzw. der Elemente bearbeiten, werden dadurch Änderungen an allen ausgewählten Keyframes vorgenommen.
Wenn ein Element nicht für die vollständige Animationszeitachse vorhanden sein muss, können Sie seinen Sichtbarkeitsbereich festlegen, sodass es außerhalb des Bereichs ausgeblendet ist.
Easing einer Animation ändern
Wenn Sie die Easing-Funktionen einer Animation ändern möchten, klicken Sie mit der rechten Maustaste auf die entsprechende Spanne und wählen Sie ein neues Easing oder Easing-Optionen... aus, um ein benutzerdefiniertes Easing anzugeben.
Animation als Schleife wiedergeben
- Klicken Sie in der Zeitachse auf der Animationsebene, die Sie als Schleife wiedergeben möchten, auf die Schaltfläche Animationswiederholung festlegen
.
- Wählen Sie im Pop-up-Menü eine der folgenden Optionen aus:
- Unbegrenzt – Die Animation läuft in einer Endlosschleife.
- ___ mal – Die Animation wird so oft wiederholt wie angegeben.
- Keine – Die Animation wird nicht wiederholt.
Ebenen mit Sichtbarkeitsbereichen können nicht als Schleifen wiedergegeben werden.
Wenn Sie eine Ebene als Schleife wiedergeben, wird die Animation im veröffentlichten Dokument geändert.
Wenn Sie hingegen eine Animation als Schleife wiedergeben, wirkt sich das nur auf die Vorschau im Anzeigebereich aus.
Keyframes und Spannen auf der Zeitachse anpassen
Keyframes und Spannen auswählen
Es gibt mehrere Möglichkeiten, Keyframes und Spannen auszuwählen:
- Klicken Sie zum Auswählen auf einen Keyframe oder eine Spanne. Wenn Sie zwei aufeinanderfolgende Keyframes auswählen, wird automatisch die dazwischenliegende Spanne mit ausgewählt. Ebenso werden die umgebenden Keyframes beim Auswählen einer Spanne einbezogen.
- Mit Umschalttaste + Klick können Sie mehrere benachbarte Keyframes oder Spannen auswählen.
- Mit Strg + Klick (Windows) bzw. ⌘ + Klick (Mac) können Sie nicht zusammenhängende Keyframes oder Spannen auswählen oder die Auswahl aufheben.
- Durch Klicken und Ziehen eines rechteckigen Laufrahmens können Sie alle Keyframes auswählen, die sich innerhalb des Laufrahmens befinden. Spannen werden nur dann ausgewählt, wenn sich beide Keyframes der Spanne innerhalb des Laufrahmens befinden.
- Drücken Sie beim Klicken und Ziehen eines Laufrahmens unter Windows auf Strg oder auf einem Mac auf ⌘, um Keyframes auszuwählen oder die Auswahl aufzuheben. Nicht ausgewählte Keyframes innerhalb des Laufrahmens werden dadurch einbezogen. Bereits ausgewählte Keyframes werden hingegen nicht berücksichtigt. Auch hier werden Spannen nur dann ausgewählt, wenn sich beide Keyframes der Spanne innerhalb des Laufrahmens befinden.
-
Doppelklicken Sie auf eine Ebene auf der Zeitachse, um alle Keyframes, Spannen und Sichtbarkeitsbereich-Ziehpunkte auf dieser Ebene auszuwählen.
Keyframes und Spannen verschieben
Nachdem Sie die Keyframes oder Spannen ausgewählt haben, können Sie sie verschieben, indem Sie sie entlang der Zeitachse an eine neue Position ziehen. Das Timing der Animation ändert sich entsprechend.
Animationen skalieren
Sie können Animationen skalieren. Hierdurch werden sie länger oder kürzer, während der Abstand zwischen den Keyframes proportional bleibt. So skalieren Sie eine Animation:
- Wählen Sie die Keyframes oder Spannen aus, die Sie skalieren möchten. Sie können sich auf verschiedenen Ebenen befinden.
- Halten Sie die Umschalttaste gedrückt, während Sie einen der ausgewählten Keyframes nach links oder rechts ziehen. Die Animation wird kürzer oder länger, je nachdem, ob Sie den Keyframe zur Mitte der Animation hin oder von ihr weg ziehen. Die anderen ausgewählten Keyframes werden proportional verschoben. Hiervon ausgenommen ist der Keyframe am äußersten Ende, dessen Position unverändert bleibt.
- Wenn Sie das Andocken der Zeitachse aktiviert haben, gilt dies nur für Keyframes, die Sie ziehen.
- Keyframes können nicht überlappen. Der Abstand zwischen zwei Keyframes darf 0,1 ms nicht unterschreiten.
- Nicht ausgewählte Keyframes lassen sich nicht verschieben, können jedoch die Bewegung der ausgewählten Keyframes einschränken.
Skalierung des Keyframes auf der Zeitachse
Keyframe kopieren und einfügen
Sie können Keyframes kopieren und an einem anderen Zeitpunkt auf derselben Ebene, auf einer anderen Ebene oder sogar auf der Zeitachse einer anderen Seite oder eines anderen Dokuments einfügen. Der eingefügte Keyframe behält die Animationseigenschaften bei, nicht jedoch das Easing der Animation oder einen etwaigen Bewegungspfad.
Kopieren Sie Keyframes mit einer der folgenden Methoden und fügen Sie sie ein:
-
Wählen Sie den zu kopierenden Keyframe aus, drücken Sie unter Windows Strg + C oder auf einem Mac ⌘ + C, klicken Sie dann auf die neue Position auf der Zeitachse und wählen Sie die Zielebene(n) aus. Drücken Sie zum Einfügen unter Windows Strg + V und auf einem Mac ⌘ + V.
-
Klicken Sie mit der rechten Maustaste auf den zu kopierenden Keyframe. Wählen Sie im Pop-up-Menü Keyframe kopieren aus und klicken Sie mit der rechten Maustaste auf eine neue Position auf der Zeitachse, um die Zielebene zu bestimmen. Wählen Sie dann im Pop-up-Menü Keyframe einfügen aus.
-
Halten Sie unter Windows oder Linux die Alt-Taste bzw. auf einem Mac die Wahltaste gedrückt und klicken und ziehen Sie den Keyframe, um ihn an der Endposition zu duplizieren. Diese Methode kann allerdings nicht verwendet werden, um Keyframes für verschachtelte Animationen über Seiten, Dokumente oder Zeitachsen hinweg zu duplizieren.
Wenn Sie einen Keyframe kopieren und in einer Ebene einfügen, in der es bis zu diesem Zeitpunkt keinen Keyframe gab, wird mit dem eingefügten Keyframe automatisch an der Startposition der Ebene ein neuer Keyframe eingefügt, es sei denn, Sie fügen den Keyframe an der Startposition ein.
Wenn Sie einen Keyframe kopieren und an der Position eines vorhandenen Keyframes einfügen, werden die entsprechenden animierten Eigenschaften des vorhandenen Keyframes durch die animierten Eigenschaften des eingefügten Keyframes überschrieben.
Keyframes löschen
Zum Löschen eines Keyframes klicken Sie unter Windows mit der rechten Maustaste bzw. auf einem Mac mit gedrückter Strg-Taste auf einen Keyframe und wählen im Pop-up-Menü Löschen aus.
Keyframe-Regeln im CSS-Steuerfeld bearbeiten
Wenn Sie mit CSS-Keyframe-Regeln (die mit dem Keyword @keyframes beginnen) vertraut sind, können Sie das CSS-Steuerfeld nutzen, um sich in der Designansicht Animationsstile anzusehen und zu bearbeiten. Die Änderungen, die Sie im Steuerfeld vornehmen, werden auf der Zeitachse und im Anzeigebereich automatisch übernommen.
Mit Keyframe-Regeln arbeiten
- Wenn Sie sich die Keyframe-Regel für ein einzelnes animiertes Element im CSS-Steuerfeld ansehen möchten, wählen Sie das entsprechende Element aus.
- Wenn Sie zwischen bereits vorhandenen Keyframes weitere hinzufügen möchten, klicken Sie auf Keyframe einfügen.
- Sie können die Keyframe-Prozentsätze bearbeiten.
- Sie können für einen Keyframe animierte Eigenschaften hinzufügen, bearbeiten und löschen.
- Sie können eine animierte Eigenschaft für die gesamte Animation aktivieren oder deaktivieren, indem Sie auf das Kästchen neben dem Eigenschaftsnamen klicken.
- Sie können einen einzelnen Keyframe löschen, indem Sie den Prozentsatz oder alle animierten Eigenschaften für diesen Keyframe löschen.
- Sie können die gesamte CSS-Animation für ein Element löschen, indem Sie die entsprechende Keyframe-Regel auswählen und unten im Steuerfeld auf Ausgewählte Regeln löschen
klicken.
Keyframe-Regeln im CSS-Steuerfeld bearbeiten
Beschränkungen
- Das Easing kann nicht geändert werden.
- Nach dem letzten Keyframe kann kein weiterer Keyframe hinzugefügt werden. Verwenden Sie stattdessen die Zeitachse.
Weitere Informationen zur Verwendung des CSS-Steuerfelds