CSS animation-name Eigenschaft
Mit animation-name legen Sie den Namen einer @keyframes-Animation fest. Probieren Sie das animation-name Beispiel aus.
Die Eigenschaft animation-name benennt eine oder mehrere @keyframes-Animationen, die auf ein Element angewendet werden sollen. Der Wert ist der Bezeichner, den Sie einer @keyframes-Regel gegeben haben — der Name ist das Bindeglied zwischen dem Element und seiner Animation. Ohne animation-name hat der Browser keine Keyframes, die er ausführen kann, sodass nichts animiert wird, selbst wenn Sie eine Dauer festgelegt haben.
Diese Eigenschaft verweist nur auf die Animation; sie startet sie nicht von allein. Sie benötigen zusätzlich eine von null verschiedene animation-duration, damit die Keyframes abgespielt werden. animation-name ist eine der CSS3-Eigenschaften.
In der Praxis schreibt man animation-name selten von Hand — das Kurzformat animation legt Name, Dauer, Timing-Funktion, Verzögerung, Anzahl der Wiederholungen, Richtung und mehr in einer einzigen Deklaration fest. Verwenden Sie die Langform, wenn Sie nur den Namen überschreiben möchten (zum Beispiel, um die Keyframes beim Hover auszutauschen und dabei das gleiche Timing beizubehalten).
Wann verwenden
- Einen Keyframes-Satz für mehrere Elemente wiederverwenden mit unterschiedlichen Dauern oder Verzögerungen, indem Sie
animation-nameeinmal setzen und die anderen Langformen variieren. - Animationen je nach Zustand wechseln — weisen Sie einem Element normalerweise einen Namen und bei
:hoveroder einem Klassen-Toggle einen anderen Namen zu. - Mehrere Animationen gleichzeitig ausführen auf demselben Element, indem Sie kommagetrennte Namen angeben (siehe Mehrere Animationen weiter unten).
Benennungsregeln
Ein Keyframes-Name ist ein CSS-Bezeichner, daher gelten dieselben Regeln:
- Er ist Groß-/Kleinschreibung unterscheidend:
Slideundslidesind unterschiedliche Namen. - Er darf Buchstaben, Ziffern, Bindestriche und Unterstriche enthalten, darf jedoch nicht mit einer Ziffer beginnen.
- Vermeiden Sie die CSS-weiten Schlüsselwörter
none,initial,inheritundunsetals Animationsnamen —animation-name: nonewird als „keine Animation" interpretiert, nicht als Keyframes-Block, der buchstäblichnoneheißt.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für die Pseudo-Elemente ::before und ::after. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM Syntax | object.style.animationName = "element"; |
Syntax
Syntax der CSS animation-name Eigenschaft
animation-name: keyframename | none | initial | inherit;Sie können mehrere Namen, durch Kommas getrennt, angeben, um mehrere Animationen auf dasselbe Element anzuwenden:
animation-name: slide, fade;Beispiel der animation-name Eigenschaft
Beispiel der CSS animation-name Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation-name: element;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>Im gezeigten Beispiel wird der Animationsname auf „element" gesetzt. Sie können jeden beliebigen Namen wählen, solange eine passende @keyframes element-Regel vorhanden ist. Wenn der Name keine passende @keyframes-Regel hat, wird die Deklaration einfach ignoriert und nichts wird animiert.
Mehrere Animationen
Wenn Sie mehrere Namen auflisten, wird jeder Name positionell den Werten der anderen Animations-Langformen zugeordnet. Hier erhält slide 2s/ease-out und fade erhält 4s/linear:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
padding: 20px;
background: #1c87c9;
color: #fff;
animation-name: slide, fade;
animation-duration: 2s, 4s;
animation-timing-function: ease-out, linear;
animation-iteration-count: infinite;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(150px); }
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0.2; }
}
</style>
</head>
<body>
<div>Sliding and fading at the same time.</div>
</body>
</html>Wenn Sie für eine andere Eigenschaft weniger Werte angeben als Namen vorhanden sind, werden die Werte wiederholt, um alle Namen abzudecken. Für eine feinere Steuerung der restlichen Animation siehe animation-delay und animation-direction.
Werte
| Wert | Beschreibung |
|---|---|
| none | Dies ist der Standardwert. Gibt an, dass keine Animation vorhanden ist. |
| keyframename | Gibt den Namen der Animation an. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |