mozilla
Ihre Suchergebnisse

    @keyframes

    Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

    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.

    Zusammenfassung

    Durch die CSS-at-Regel @keyframes kann der Autor die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem er Keyframes (oder Wegpunkte) setzt, die während der Sequenz an bestimmten Punkten erreicht werden. Dadurch erhält man eine spezifischere Kontrolle über die Schritte einer Animationssequenz, als wenn man den Browser selbst alles überlassen würde.

    Die at-Regel @keyframes kann mit dem CSS-Objekt CSSKeyframesRule erlangt werden.

    Um Keyframes zu benutzen, erstellt man eine @keyframes-Regel mit einem Namen, der dann durch die animation-name-Eigenschaft genutzt wird, um einer Animation einen Keyframe zu geben. Jede @keyframes-Regel beinhaltet eine Style-Liste aus Keyframe-Selektoren, von denen jeder eine Prozentzahl angibt, an deren Stelle in der Animation die jeweiligen Styles übergeben werden.

    Die Reihenfolge der Keyframes ist egal, denn sie werden in der Reihenfolge ihrer Prozentzahl verwendet.

    Gültige Keyframe-Liste

    Damit ein Keyframe gültig ist, muss er Regeln enthalten, die zumindest die Zeiten 0% (oder from) und 100% (oder to) enthalten (dies sind die Start- und Endstaten der Animation). Wenn beide Zeiten nicht spezifiziert sind, ist die Keyframe-Deklaration ungültig und kann nicht als Animation verwendet werden.

    Wenn Eigenschaften beschrieben werden, die nicht in den Keyframe-Regeln animiert werden können, werden sie ignoriert. Die anderen, unterstützten Eingeschaften werden jedoch trotzdem animiert.

    Doppelte Deklarierungen

    Wenn mehrere Keyframe-Sets mit einem Namen existieren, gilt der letzte definierte. @keyframes-Regeln sind nicht kaskadierend, Animationen nehmen also niemals Keyframes von mehr als einer definierten Regel.

    Wenn ein Zeitpunkt in der Animation doppelt deklariert ist, gilt der letzte Keyframe dieses Zeitpunkts in der @keyframes-Regel. Mehrere Regeln derselben Zeit sind nicht kaskadierend.

    Wann Eigenschaften aus manchen Keyframes ausgelassen werden

    Jede Eigenschaft, die nicht in jedem Keyframe spezifiert wird, ist interpoliert (mit der Ausnahme von denen, die nicht interpoliert werden können und daher aus der gesamten Animation weggelassen werden). Zum Beispiel:

    @keyframes identifier {
      0% { top: 0; left: 0; }
      30% { top: 50px; }
      68%, 72% { left: 50px; }
      100% { top: 100px; left: 100%; }
    }
    

    Hier wird die top-Eigenschaft mit Benutzen der 0%-, 30%-, und 100%-Keyframes animiert, und left animiert anhand der 0%-, 68%-, and 100%-Keyframes.

    Nur Eigenschaften, die in sowohl im 0%-, als auch im 100%-Keyframe spezifiziert sind, werden animiert; jede Eigenschaft, die nicht in diesen beiden Keyframes enthalten ist, wird ihren Startwert für die Dauer der Animation behalten.

    Wann ein Keyframe mehrmals definiert wird

    Wenn ein Keyframe mehrmals definiert wird, aber nicht alle Eigenschaften in jedem Keyframe enthalten sind, werden ausschließlich die Werte des letzten Keyframes beachtet, zum Beispiel:

    @keyframes identifier {
      0% { top: 0; }
      50% { top: 30px; left: 20px; }
      50% { top: 10px; }
      100% { top: 0; }
    }
    

    In diesem Beispiel ist der genutzte Wert des 50%-Keyframe top: 10px und alle anderen Werte des ersten Keyframes werden ignoriert.

    Kein Standard   Kaskadierende Keyframes werden in Firefox ab Version 14 unterstützt. Im oberen Beispiel wird beim 50%-Keyframe der Wert left: 20px beachtet. Dies ist noch nicht in der Spezifikation definiert, wird allerdings gerade diskutiert.

    Syntax

    @keyframes <bezeichner> {
      [ [ from | to | <Prozentzahl> ] [, from | to | <Prozentzahl> ]* block ]*
    }
    

    Values

    <Bezeichner>
    Ein Name, der die Keyframe-Liste eindeutig identifiziert. Er muss der Bezeichner-Produktion in CSS-Syntax entsprechen.
    from
    Der Startwert 0%.
    to
    Der Endwert 100%.
    <percentage>
    Eine Prozentzahl, die den Zeitpunkt in der Animationssequenz angibt, an der der spezifizierte Keyframe gelten soll.

    Beispiel

    Siehe CSS-Animationen für Beispiele.

    Spezifikationen

    Spezifikation Status Kommentar
    CSS Animations
    Die Definition von '@keyframes' in dieser Spezifikation.
    Working Draft  

    Browser-Kompabilität

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

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

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