animation-fill-mode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die animation-fill-mode
CSS Eigenschaft legt fest, wie eine CSS-Animation Stile auf ihr Ziel vor und nach ihrer Ausführung anwendet.
Probieren Sie es aus
Es ist oft praktisch, die Kurzschreibweiseigenschaft animation
zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.
Syntax
/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
/* Global values */
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;
Werte
none
-
Die Animation wird keine Stile auf das Ziel anwenden, wenn sie nicht ausgeführt wird. Das Element wird stattdessen mit allen anderen darauf angewendeten CSS-Regeln angezeigt. Dies ist der Standardwert.
forwards
-
Das Ziel wird die berechneten Werte beibehalten, die durch das letzte während der Ausführung aufgetretene keyframe festgelegt wurden. Das letzte Keyframe hängt vom Wert von
animation-direction
undanimation-iteration-count
ab:animation-direction
animation-iteration-count
letztes aufgetretenes Keyframe normal
gerade oder ungerade 100%
oderto
reverse
gerade oder ungerade 0%
oderfrom
alternate
gerade 0%
oderfrom
alternate
ungerade 100%
oderto
alternate-reverse
gerade 100%
oderto
alternate-reverse
ungerade 0%
oderfrom
Animierte Eigenschaften verhalten sich, als seien sie in einem
will-change
Eigenschaftswert enthalten. Wenn während der Animation ein neuer Stacking-Kontext erstellt wurde, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation beendet ist. backwards
-
Die Animation wird die in dem ersten relevanten keyframe definierten Werte anwenden, sobald sie auf das Ziel angewendet wird, und diese während der
animation-delay
-Periode beibehalten. Das erste relevante Keyframe hängt vom Wert vonanimation-direction
ab:animation-direction
erstes relevantes Keyframe normal
oderalternate
0%
oderfrom
reverse
oderalternate-reverse
100%
oderto
both
-
Die Animation folgt den Regeln sowohl für vorwärts als auch rückwärts, wodurch die Animationseigenschaften in beide Richtungen erweitert werden.
Hinweis: Wenn Sie mehrere durch Kommata getrennte Werte für eine animation-*
Eigenschaft angeben, werden sie in der Reihenfolge der Erscheinung der animation-name
s auf die Animationen angewendet. Für Situationen, in denen die Anzahl der Animationen und die animation-*
Eigenschaftswerte nicht übereinstimmen, siehe Setzen mehrerer Animations-Eigenschaftswerte.
Hinweis: animation-fill-mode
hat denselben Effekt beim Erstellen von CSS-scroll-gesteuerten Animationen wie bei regulären zeitbasierten Animationen.
Formale Definition
Initialer Wert | none |
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
Beispiele
Fill-Modus festlegen
Sie können den Effekt von animation-fill-mode
im folgenden Beispiel sehen. Es zeigt, wie Sie die Animation in ihrem Endzustand verbleiben lassen können, anstatt zum ursprünglichen Zustand zurückzukehren (was der Standard ist).
HTML
<p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="grows-and-stays">This grows and stays big.</div>
<div class="grows">This just grows.</div>
</div>
CSS
.demo {
border-top: 100px solid #ccc;
height: 300px;
}
@keyframes grow {
0% {
font-size: 0;
}
100% {
font-size: 40px;
}
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
}
.demo:hover .grows-and-stays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Ergebnis
Weitere Beispiele finden Sie unter CSS-Animationen.
Spezifikationen
Specification |
---|
CSS Animations Level 1 # animation-fill-mode |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Verwendung von CSS-Animationen
- JavaScript-API
AnimationEvent
- Andere verwandte Animationseigenschaften:
animation
,animation-composition
,animation-delay
,animation-direction
,animation-duration
,animation-iteration-count
,animation-name
,animation-play-state
,animation-timeline
,animation-timing-function