Eigenschaft animation

Die Eigenschaft animation ist eine Kurzschreibweise für Animationen, die es erlaubt, alle Eigenschaften für eine Animation gleichzeitig zu setzen: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Die Reihenfolge der Werte ist beliebig, jedoch muss die Animationsdauer animation-duration zwingend vor der Verzögerung animation-delay stehen. Erforderlich sind nur die Eigenschaften animation-name und animation-duration.

Die Eigenschaft kann auch den Wert none annehmen, was die Animation komplett deaktiviert. Dieser Wert ist der Standardwert.

Syntax

Selektor {
	animation: Werte;
}

Beispiel

In diesem Beispiel gibt es eine Verzögerung von 3 Sekunden vor der Animation (vor jeder neuen Wiedergabe), und dann wird die Animation über 6 Sekunden abgespielt:

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

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

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Beispiel . Mögliche Probleme

Eine Animation, die in Kurzform geschrieben ist, kann aufgrund ihres Namens nicht funktionieren. Betrachten wir die folgende Animation:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Beachten Sie, ich verwende den Animationsnamen reverse. Auf den ersten Blick scheint alles in Ordnung, aber die Animation funktioniert nicht, da reverse ein gültiges Schlüsselwort für die Eigenschaft animation-direction ist.

Ebenso funktioniert die Animation nicht, wenn in der Kurzform andere Schlüsselwörter im Namen verwendet werden. Aber alles funktioniert einwandfrei bei Verwendung der "vollständigen" Form der Beschreibung.

Zu den Schlüsselwörtern-Werten von animation-direction, die Animationen stören, gehören auch die Schlüsselwörter, die sich auf Timing-Funktionen beziehen, sowie infinite, alternate, running, paused und so weiter.

Siehe auch

die @keyframes Regel,
die die Keyframes einer Animation definiert
fließende Übergänge transition, die eine Animation beim Überfahren eines Elements darstellen