Eigenschaft animation-fill-mode

Die Eigenschaft animation-fill-mode legt fest, in welcher Position die Animation nach dem Ende stoppen soll. Standardmäßig kehrt die Animation zurück zum ursprünglichen Wert und das kann nicht sehr schön aussehen.

Syntax

Selektor {
	animation-fill-mode: backwards | forwards | both | none;
}

Werte

Wert	Beschreibung
`none`	Wenn eine Animationsverzögerung eingestellt ist - dann wird das Element während der Verzögerungszeit an seiner Position bleiben und dann sprunghaft zum `0%` Frame wechseln. Nach dem Ende der Animation bleibt das Element nicht in dem Zustand, in dem es angehalten hat, sondern springt in den Ausgangszustand zurück.
`backwards`	Bewirkt, dass sich das Element nach dem Laden der Seite zum `0%` Frame bewegt, auch wenn eine Verzögerung `animation-delay` eingestellt ist, und dort bleibt, bis die Animation beginnt. Nach dem Ende der Animation bleibt das Element nicht in dem Zustand, in dem es angehalten hat, sondern springt in den Ausgangszustand zurück.
`forwards`	Weist den Browser an, dass das Element nach dem Ende der Animation in dem Zustand bleibt, in dem es angehalten hat.
`both`	Beinhaltet backwards und forwards - nach dem Laden der Seite wird das Element auf den `0%` Frame gesetzt, und nach dem Ende der Animation bleibt das Element dort, wo es angehalten hat.

Standardwert: none.

Beispiel . Wert none

In diesem Beispiel ist margin-left auf den Wert 300px für das Element gesetzt, und für den ersten Frame der Animation - auf 0px. Da es keine Verzögerung animation-delay gibt, wird das Element nach dem Laden der Seite auf 0px gesetzt, und nicht auf 300px. Außerdem wird die Animation nach dem Ende zum Anfangswert zurückspringen:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Beispiel . Wert none

In diesem Beispiel ist margin-left auf den Wert 300px für das Element gesetzt, und für den ersten Frame der Animation - auf 0px. Außerdem ist für das Element eine Verzögerung animation-delay von 3 Sekunden eingestellt, daher wird das Element nach dem Laden der Seite auf 300px gesetzt, und nicht auf 0px, und wird dort 3 Sekunden stehen, nachdem die Animation beginnt, und dann sprunghaft zu 0px wechseln - und die Animation beginnt von dort. Außerdem wird die Animation nach dem Ende zum Anfangswert zurückspringen:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Beispiel . Wert backwards

In diesem Beispiel ist margin-left auf den Wert 300px für das Element gesetzt, und für den ersten Frame der Animation - auf 0px. Außerdem ist für das Element animation-fill-mode auf den Wert backwards gesetzt, daher wird das Element nach dem Laden der Seite auf 0px gesetzt, und nicht auf 300px, wie es bei animation-fill-mode mit dem Wert none der Fall war. Außerdem wird die Animation nach dem Ende zum Anfangswert zurückspringen:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Beispiel . Wert none und Anzahl der Wiederholungen gleich 1

In diesem Beispiel ist margin-left auf den Wert 300px für das Element gesetzt, und für den ersten Frame der Animation - auf 0px. Außerdem ist für das Element eine Verzögerung animation-delay von 3 Sekunden eingestellt, daher wird das Element nach dem Laden der Seite auf 300px gesetzt, und nicht auf 0px, und wird dort 3 Sekunden stehen, nachdem die Animation beginnt, und dann sprunghaft zu 0px wechseln - und die Animation beginnt von dort. Da animation-fill-mode auf dem Wert none eingestellt ist, kehrt das Element nach dem Abspielen der Animation zum Anfangswert zurück:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Beispiel . Wert forwards und Anzahl der Wiederholungen gleich 1

In diesem Beispiel ist animation-fill-mode auf den Wert forwards gesetzt, und die Anzahl der Animationswiederholungen - auf 1. Nach dem Abspielen der Animation bleibt das Element in der Position, in der die Animation endete, und springt nicht zum Ausgangspunkt zurück.

Außerdem ist margin-left auf den Wert 300px für das Element gesetzt, und für den ersten Frame der Animation - auf 0px. Außerdem ist für das Element eine Verzögerung animation-delay von 3 Sekunden eingestellt, daher wird das Element nach dem Laden der Seite auf 300px gesetzt, und nicht auf 0px, und wird dort 3 Sekunden stehen, nachdem die Animation beginnt, und dann sprunghaft zu 0px wechseln - und die Animation beginnt von dort:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Beispiel . Wert both und Anzahl der Wiederholungen gleich 1

In diesem Beispiel ist animation-fill-mode auf den Wert both gesetzt, und die Anzahl der Animationswiederholungen - auf 1. Nach dem Laden der Seite wird das Element im ersten Frame der Animation stehen (bei 0px, und nicht bei 300px), und nach dem Abspielen der Animation bleibt das Element in der Position, in der die Animation endete, und springt nicht zum Ausgangspunkt zurück:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Siehe auch

die Eigenschaft animation-name,
die einen Namen für die Animation festlegt
die Eigenschaft animation-duration,
die die Dauer der Animation festlegt
die Eigenschaft animation-delay,
die die Verzögerung vor der Ausführung der Animation festlegt
die Eigenschaft animation-timing-function,
die die Geschwindigkeit der Animationsausführung festlegt
die Eigenschaft animation-iteration-count,
die die Anzahl der Iterationen der Animation festlegt
die Eigenschaft animation-direction,
die die Richtung der Animation festlegt
die Eigenschaft animation-play-state,
die das Pausieren der Animation ermöglicht
die Eigenschaft animation,
die eine Kurzschreibweise für Animationen darstellt
die Anweisung @keyframes,
die die Keyframes der Animation festlegt
fließende Übergänge transition, die eine Animation beim Überfahren eines Elements darstellen