Optional: Wählen Sie ein Element aus (Absatz, Überschrift usw.), auf das Sie den Übergang anwenden möchten. Stattdessen können Sie auch einen Übergang erstellen und ihn später auf ein Element anwenden.
Zuletzt aktualisiert am
25. April 2024
Mithilfe des Bedienfelds „CSS-Übergänge“ können Sie CSS3-Übergänge erstellen, bearbeiten und löschen.
Um einen CSS3-Übergang zu erstellen, erstellen Sie eine Übergangsklasse. Dazu legen Sie die Werte für die Übergangseigenschaften des Elements fest. Wenn Sie ein Element auswählen, bevor Sie eine die Übergangsklasse erstellen, wird die Übergangsklasse automatisch auf das ausgewählte Element angewendet.
Du kannst den generierten CSS-Code zum aktuellen Dokument hinzufügen oder eine externe CSS-Datei angeben.
Erstellen und Anwenden von CSS3-Übergangseffekten
Wähle Fenster > CSS-Übergänge aus.
Klicken Sie auf 
.
Erstellen Sie mithilfe der Optionen im Dialogfeld „Neuer Übergang“ eine Übergangsklasse.
Zielregel
Geben Sie einen Namen für den Selektor ein. Es kann irgendein CSS-Selektor angegeben werden, etwa ein Tag, eine Regel, eine ID oder ein zusammengesetzter Selektor. Wenn Sie beispielsweise auf alle <hr>-Tags Übergangseffekte anwenden wollen, geben Sie hr ein
Übergang bei
Wählen Sie einen Status aus, auf den Sie den Übergang anwenden möchten. Soll der Übergang beispielsweise angewendet werden, wenn die Maus über das Element bewegt wird, verwenden Sie die Option hover.
Verwenden Sie für alle Eigenschaften denselben Übergang.
Aktivieren Sie diese Option, wenn Sie für alle CSS-Eigenschaften dieselbe Dauer, Verzögerung und Zeitfunktion festlegen möchten, die sich im Verlauf des Übergangs allmählich ändern sollen.
Verwenden Sie für jede Eigenschaft einen anderen Übergang.
Aktivieren Sie diese Option, wenn Sie für jede CSS-Eigenschaft, die sich im Verlauf des Übergangs allmählich ändern soll, eine andere Dauer, Verzögerung und Zeitfunktion angeben wollen.
Eigenschaft
Klicken Sie auf , um zu dem Übergang eine CSS-Eigenschaft hinzuzufügen.
Dauer
Geben Sie für die Dauer des Übergangseffekts einen Wert in Sekunden (S) oder Millisekunden (ms) ein.
Verzögerung
Die Zeit (in Sekunden oder Millisekunden), bevor der Übergangseffekt beginnt.
Zeitfunktion
Wählen Sie aus den verfügbaren Optionen einen Übergangsstil aus.
Endwert
Der endgültige Wert für den Übergangseffekt. Wenn Sie beispielsweise den Schriftgrad am Ende des Übergangseffekts um 40 px vergrößern möchten, geben Sie für die Schriftgröße 40 px an.
Auswählen, wo der Übergang erstellt werden soll
Wenn Sie den Stil in das aktuelle Dokument einbetten möchten, wählen Sie „Nur dieses Dokument“.
Wenn Sie ein externes Stylesheet für den CSS3-Code erstellen möchten, wählen Sie „Neue Stylesheet-Datei“ aus. Wenn Sie auf „Übergang erstellen“ klicken, werden Sie aufgefordert, den Pfad anzugeben, in dem die neue CSS-Datei gespeichert werden soll. Nachdem das Stylesheet erstellt worden ist, wird es in das Menü „Auswählen, wo der Übergang erstellt werden soll“ aufgenommen.
Bearbeiten von CSS3-Übergangseffekten
Wähle im Bedienfeld CSS-Übergänge den Übergangseffekt aus, den du bearbeiten möchtest.
Klicken Sie auf 
.
Ändern Sie im Dialogfeld „Übergang bearbeiten“ zuvor eingegebene Werte für den Übergang.
Deaktivieren der CSS-Kurzschrift für Übergänge
Weitere Informationen zur CSS-Kurzschrift und ihren Vorteilen finden Sie unter Was ist eine CSS-Kurzschrifteigenschaft?
Wählen Sie „Bearbeiten“ > „Voreinstellungen“.
Wähle CSS-Stile aus.
Deaktivieren Sie unter „Kurzschrift verwenden für“ die Option „Übergang“.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
