diff options
Diffstat (limited to 'files/de/web/css/animation-name/index.html')
-rw-r--r-- | files/de/web/css/animation-name/index.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/files/de/web/css/animation-name/index.html b/files/de/web/css/animation-name/index.html new file mode 100644 index 0000000000..5b755b8b35 --- /dev/null +++ b/files/de/web/css/animation-name/index.html @@ -0,0 +1,86 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-name +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code>animation-name</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert eine Liste von Animationen, welche dem Element zugeortnet werden sollen. Jeder name steht für eine {{cssxref("@keyframes")}} Regel, welche den Ablauf der Animation definiert.</p> + +<p>Meistens wird die Kurzform {{cssxref("animation")}} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">animation-name: none; +animation-name: test_05; +animation-name: -specific; +animation-name: sliding-vertically; + +animation-name: test1; +animation-name: test1, animation4; +animation-name: none, -moz-specific, sliding; + +/* Globale Werte */ +animation-name: initial; +animation-name: inherit; +animation-name: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Keine Animation soll abgespielt werden. Dieser Wert ermöglicht das deaktivieren einer Animation, ohne die dazugehörigen Eigenschaften und Regeln zu ändern.</dd> + <dt><code>IDENT</code></dt> + <dd>Eine beliebige Zeichenkette aus den Buchstaben <code>a</code> bis <code>z</code>, Zahlen <code>0</code> bis <code>9</code>, Bodenstriche (<code>_</code>), und oder Bindestriche (<code>-</code>). Das erste Zeichen muss ein Buchstabe oder einer der beiden zugelassenen Striche sein. Es dürfen nicht zwei hintereinandeflogende Striche am Anfang stehen.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.animation-name")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> |