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 legt die Namen von einem oder mehreren @keyframes
At-Regeln fest, die die Animation beschreiben, die auf ein Element angewendet werden soll. Mehrere @keyframe
At-Regeln werden als kommagetrennte Liste von Namen angegeben. Wenn der angegebene Name keiner @keyframe
At-Regel entspricht, werden keine Eigenschaften animiert.
Probieren Sie es aus
Es ist oft praktisch, die Kurzschreibweiseigenschaft animation
zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.
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 bezeichnet. Es kann verwendet werden, um eine Animation zu deaktivieren, ohne die Reihenfolge der anderen Identifikatoren zu ändern, oder um Animationen aus dem Kaskade zu deaktivieren.
<custom-ident>
-
Ein nicht zitierter Name, der die Animation identifiziert. Dieser Identifikator besteht aus einer Kombination von Groß- und Kleinschreibung beachtenden Buchstaben
a
bisz
, Zahlen0
bis9
, Unterstrichen (_
) und/oder Bindestrichen (-
). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein. Außerdem sind zwei Bindestriche am Anfang des Identifikators verboten. Ferner kann der Identifikator nichtnone
,unset
,initial
oderinherit
sein. <string>
-
Eine Zeichenfolge, die denselben Regeln wie benutzerdefinierte Identifikatoren folgt, wie oben beschrieben, außer dass sie von doppelten (") oder einfachen (') Anführungszeichen umgeben ist. Wenn ein zitierter String sowohl für den
animation-name
als auch für den entsprechenden@keyframes
At-Regelnamen verwendet wird, sindnone
, globale Schlüsselwörter und Namen, die mit einem Unterstrich oder doppelten Bindestrichen beginnen, gültig, obwohl nicht empfohlen.
Hinweis:
Wenn Sie mehrere kommagetrennte Werte bei einer animation-*
Eigenschaft angeben, werden diese auf die Animationen in der Reihenfolge angewendet, in der die animation-name
s erscheinen. Für Situationen, in denen die Anzahl der Animationen und der animation-*
Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Werte für Animationseigenschaften.
Formale Definition
Anfangswert | none |
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
Beispiele
Eine Animation benennen
Diese Animation hat einen animation-name
von 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-name | ||||||||||||
none |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
Siehe auch
- CSS-Animationen verwenden
- JavaScript
AnimationEvent
API - Andere verwandte Animationseigenschaften:
animation
,animation-composition
,animation-delay
,animation-direction
,animation-duration
,animation-fill-mode
,animation-iteration-count
,animation-play-state
,animation-timeline
,animation-timing-function