From 24c49321b8712ace18351fa6fce1e9b96e9bad7b Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 19 Jul 2021 11:17:12 -0400 Subject: unbreak de css animations live samples (#1611) --- .../css_animations/using_css_animations/index.html | 33 +++++++++++----------- 1 file changed, 16 insertions(+), 17 deletions(-) (limited to 'files/de/web') diff --git a/files/de/web/css/css_animations/using_css_animations/index.html b/files/de/web/css/css_animations/using_css_animations/index.html index 620e82b93a..d379d84f30 100644 --- a/files/de/web/css/css_animations/using_css_animations/index.html +++ b/files/de/web/css/css_animations/using_css_animations/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/CSS_Animations/Using_CSS_animations translation_of: Web/CSS/CSS_Animations/Using_CSS_animations original_slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen --- -

{{SeeCompatTable}}{{CSSRef}}

+

{{CSSRef}}

CSS Animationen ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.

@@ -16,7 +16,7 @@ original_slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen
  • Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.
    • -

    Konfigurieren der Animation

    +

    Konfigurieren der Animation

    Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit nicht die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.

    @@ -39,10 +39,9 @@ original_slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen
    Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.
    {{ cssxref("animation-play-state") }}
    Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.
    -
    -

    Definieren der Animationssequenz mittels Keyframes

    -
    - + + +

    Definieren der Animationssequenz mittels Keyframes

    Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.

    @@ -50,11 +49,11 @@ original_slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen

    Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.

    -

    Beispiele

    +

    Beispiele

    Hinweis: Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die -webkit Präfix-Syntax.
    -

    Einen Text übers Fenster gleiten lassen.

    +

    Einen Text übers Fenster gleiten lassen.

    Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.

    @@ -97,7 +96,7 @@ her in a languid, sleepy voice.</p>

    {{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

    -

    Hinzufügen eines weiteren Keyframes

    +

    Hinzufügen eines weiteren Keyframes

    Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:

    @@ -145,7 +144,7 @@ her in a languid, sleepy voice.</p>

    {{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

    -

    Lass es sich wiederholen

    +

    Lass es sich wiederholen

    Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf infinite, damit sich die Animation unendlich oft wiederholt:

    @@ -176,7 +175,7 @@ her in a languid, sleepy voice.</p>

    {{EmbedLiveSample("Making_it_repeat","100%","250")}}

    -

    Lassen Sie es sich vor- und zurück bewegen

    +

    Lassen Sie es sich vor- und zurück bewegen

    Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf alternate gesetzt werden:

    @@ -208,7 +207,7 @@ her in a languid, sleepy voice.</p>

    {{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

    -

    Benutzen der Animation Kurzversion

    +

    Benutzen der Animation Kurzversion

    Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:

    @@ -231,7 +230,7 @@ her in a languid, sleepy voice.</p>

    Hinweis: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.

    -

    Setzen mehrere Animationseigenschaftswerte

    +

    Setzen mehrere Animationseigenschaftswerte

    Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:

    @@ -253,7 +252,7 @@ animation-iteration-count: 2, 1, 5; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1; -

    Benutzen von Animations-Ereignissen

    +

    Benutzen von Animations-Ereignissen

    Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.

    @@ -282,7 +281,7 @@ animation-iteration-count: 2, 1; } } -

    Hinzufügen der Animations-Ereignis-Listener

    +

    Hinzufügen der Animations-Ereignis-Listener

    Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.

    @@ -298,7 +297,7 @@ element.className = "slidein";

    Warum? Weil das animationstart Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.

    -

    Empfangen von Ereignissen

    +

    Empfangen von Ereignissen

    Die Ereignisse werden an die untenstehende listener() Funktion durchgereicht.

    @@ -351,7 +350,7 @@ element.className = "slidein";

    Hier gibt es eine Live-Ausgabe:

    -
    +

    Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

    -- cgit v1.2.3-54-g00ecf