Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Ihre Suchergebnisse

    animation-timing-function

    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-timing-function CSS Eigenschaft gibt an, wie eine CSS Animation über die Dauer eines Zyklus verlaufen soll. Die möglichen Werte sind eine oder mehrere <timing-function>.

    Für Schlüsselbildanimationen wird die Timingfunktion zwischen den Schlüsselbildern angewandt, anstatt über die gesamte Animation. Mit anderen Worten, die Timingfunktion wird auf den Start des Schlüsselbildes und an dessen Ende angewandt.

    Eine Animationstimingfunktion, die innerhalb eines Schlüsselbildblocks definiert wurde, wird auf dieses Schlüsselbild angewandt. Falls keine Timingfunktion für das Schlüsselbild angegeben wurde, wird die Timingfunktion verwendet, die für die gesamte Animation definiert wurde.

    Es ist oftmals einfacher, die Kurzform Eigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

    Syntax

    Formale Syntax:  <timing-function>#
    
    animation-timing-function: ease
    animation-timing-function: ease-in
    animation-timing-function: ease-out
    animation-timing-function: ease-in-out
    animation-timing-function: linear
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
    animation-timing-function: step-start
    animation-timing-function: step-end
    animation-timing-function: steps(4, end)
    
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
    

    Werte

    <timingfunction>
    Jeder <timing-function> Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in animation-property definiert wird.

    Beispiele

    Siehe CSS Animationen für Beispiele

    Spezifikationen

    Spezifikation Status Anmerkung
    CSS Animations
    Die Definition von 'animation-timing-function' in dieser Spezifikation.
    Arbeitsentwurf  

    Browser Kompatibilität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Grundlegende Unterstützung (Ja)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    10 12 -o
    12.10 #
    4.0-webkit
    Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Grundlegende Unterstützung (Ja)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    ? ? ?

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

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