animation-fill-mode

von 2 Mitwirkenden:

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

animation-fill-mode definiert den Zustand einer Animation vor und nach deren Ablauf.

Syntax

Formal syntax: <single-animation-fill-mode>#
animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

The # indicates that several values may be given, separated by commas.
Each applies to the animation defined in the same order in animation-name.
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none

Werte

none
Das Element nimmt keine Werte der Animation an.
forwards
Das Element nimmt nach Ablauf die Werte des letzten Animationsschrittes an, unter der Berücksichtigung von animation-direction und animation-iteration-count:
animation-direction animation-iteration-count Letzte keyframe Regel
normal gerade oder ungerade 100% oder to
reverse gerade oder ungerade 0% oder from
alternate gerade 0% oder from
alternate ungerade 100% oder to
alternate-reverse gerade 100% oder to
alternate-reverse ungerade 0% oder from
backwards
Das Element nimmt die Werte des ersten Animationsschrittes an und behält diesen auch während der animation-delay Zeit. animation-direction wird wie folgt gehandhabt:
animation-direction Erste keyframe Regel
normal oder alternate 0% oder from
reverse oder alternate-reverse 100% oder to
both
Vereint die Werte backwards und forwards.

Beispiele

h1 {
  animation-fill-mode: forwards;
}

Spezifikation

Spezifikation Status Anmerkung
CSS Animations Working Draft  

Browser Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10 #
4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 5.0 (5.0)-moz
16.0 (16.0)
? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: maxn, SJW
Zuletzt aktualisiert von: maxn,
Seitenleiste ausblenden