animation-name
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-name CSS Eigenschaft gibt die Namen von einem oder mehreren @keyframes At-Regeln an, die die Animation beschreiben, die auf ein Element angewendet werden soll. Mehrere @keyframes At-Regeln werden als durch Kommas getrennte Liste von Namen angegeben. Wenn der angegebene Name keiner @keyframes At-Regel entspricht, werden keine Eigenschaften animiert.
Es ist oft praktisch, die Kurzform-Eigenschaft animation zu verwenden, um alle Animations-Eigenschaften auf einmal festzulegen.
Probieren Sie es aus
animation-name: none;
animation-name: slide;
animation-name: bounce;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></div>
</section>
#example-element {
animation-direction: alternate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333333;
color: white;
height: 150px;
margin: auto;
margin-left: 0;
width: 150px;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
@keyframes bounce {
from {
background-color: orange;
color: black;
margin-top: 0;
}
to {
background-color: orange;
color: black;
margin-top: 40%;
}
}
Syntax
/* No animation */
animation-name: none;
/* Single animation */
animation-name: test_05;
animation-name: -specific;
animation-name: "sliding-vertically";
/* Multiple animations */
animation-name: test1, animation4;
animation-name:
none,
-moz-specific,
sliding;
/* Global values */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;
Werte
none-
Ein spezielles Schlüsselwort, das keine Keyframes angibt. Es kann verwendet werden, um eine Animation zu deaktivieren, ohne die Reihenfolge der anderen Bezeichner zu ändern, oder um Animationen aus der Kaskade zu deaktivieren.
<custom-ident>-
Ein nicht in Anführungszeichen gesetzter Name, der die Animation identifiziert. Dieser Bezeichner besteht aus einer Kombination von Groß- und Kleinschreibung unterscheidenden Buchstaben
abisz, Zahlen0bis9, Unterstrichen (_) und/oder Bindestrichen (-). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein. Außerdem sind zwei Bindestriche am Anfang des Bezeichners verboten. Ferner darf der Bezeichner nichtnone,unset,initialoderinheritsein. <string>-
Eine Reihe von Zeichen, die denselben Regeln wie benutzerdefinierte Bezeichner folgen, wie oben beschrieben, außer dass sie von doppelten (") oder einfachen (') Anführungszeichen umgeben sind. Wenn ein in Anführungszeichen gesetzter String sowohl für den
animation-nameals auch für den entsprechenden@keyframesAt-Regel-Namen verwendet wird, sindnone, globale Schlüsselwörter und Namen, die mit einem Unterstrich oder doppelten Bindestrichen beginnen, gültig, aber nicht empfohlen.
Hinweis:
Wenn Sie mehrere durch Kommas getrennte Werte in einer animation-* Eigenschaft angeben, werden diese in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Mehrere Animations-Eigenschaftswerte festlegen.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
animation-name =
[ none | <keyframes-name> ]#
<keyframes-name> =
<custom-ident> |
<string>
Beispiele
Eine Animation benennen
Diese Animation hat den animation-name rotate.
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Ergebnis
Fahren Sie mit der Maus über das Rechteck, um die Animation zu starten.
Siehe CSS-Animationen für Beispiele.
Spezifikationen
| Specification |
|---|
| CSS Animations Level 1 # animation-name |
Browser-Kompatibilität
Siehe auch
- CSS-Animationen verwenden
- JavaScript
AnimationEventAPI - Andere verwandte Animations-Eigenschaften:
animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-play-state,animation-timeline,animation-timing-function