mozilla
Ihre Suchergebnisse

    animation-direction

    Dies ist eine experimentelle Technologie
    Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

    Übersicht

    Die animation-direction CSS Eigenschaft gibt an, ob die Animation rückwärts oder in Wechelzyklen abgespielt werden soll.

    Es ist oft einfacher, die Kurzschreibweise animation zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

    Syntax

    Formale Syntax:  <single-animation-direction>#
    
    animation-direction: normal
    animation-direction: reverse
    animation-direction: alternate
    animation-direction: alternate-reverse
    animation-direction: normal, reverse
    animation-direction: alternate, reverse, normal
    

    Werte

    normal
    Die Animation wird in jedem Durchlauf vorwärts abgespielt. In anderen Worten, jedesmal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist die Standardeinstellung der Animationsrichtung.
    alternate
    Die Animation ändert in jedem Durchlauf die Richtung. Wenn die Animation umgekehrt abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Des weiteren werden Timingfunktionen ebenfalls umgekehrt; zum Beispiel wird eine ease-in Animation durch eine ease-out Animation ersetzt, wenn sie rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.
    reverse
    Die Animation wird in jedem Durchlauf rückwärts abgespielt. Jedes Mal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut.
    alternate-reverse
    Die Animation wird beim ersten Durchlauf rückwärts abgespielt, beim nächsten vorwärts und fährt danach abwechselnd fort. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.

    Beispiele

    Siehe CSS Animationen für Beispiele.

    Spezifikation

    Spezifikation Status Kommentar
    CSS Animations
    Die Definition von 'animation-direction' in dieser Spezifikation.
    Working Draft For the two new values, see the W3C discussion.

    Browser Kompatibilität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Grundlegende Unterstützung (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    10 12-o
    12.10 #
    4.0-webkit
    reverse 19 16.0 (16.0) 10 Not supported Not supported
    alternate-reverse 19 16.0 (16.0) 10 Not supported Not supported
    Merkmal Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Grundlegende Unterstützung ? (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    ? ? ?
    reverse Not supported (Yes)-webkit 16.0 (16.0) ? ? Not supported
    alternate-reverse ? (Yes)-webkit 16.0 (16.0) ? ? ?

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Sebastianz
    Zuletzt aktualisiert von: Sebastianz,