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.

Sie können den erzeugten CSS-Code entweder zum aktuellen Dokument hinzufügen oder eine externe CSS-Datei angeben.

Erstellen und Anwenden von CSS3-Übergangseffekten

  1. 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.

  2. Wählen Sie „Fenster“ > „CSS-Übergänge“

  3. Klicken Sie auf .

  4. 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

  1. Wählen Sie im Bedienfeld „ CSS-Übergänge den Übergangseffekt aus, den Sie bearbeiten möchten.

  2. Klicken Sie auf  .

  3. Ändern Sie im Dialogfeld „Übergang bearbeiten“ zuvor eingegebene Werte für den Übergang.

Deaktivieren der CSS-Kurzschrift für Übergänge

  1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“.

  2. Wählen Sie „CSS-Stile“.

  3. Deaktivieren Sie unter „Kurzschrift verwenden für“ die Option „Übergang“.


Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie