Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.
Übersicht
Die animation-name CSS Eigenschaft definiert eine Liste von Animationen, welche dem Element zugeortnet werden sollen. Jeder name steht für eine @keyframes Regel, welche den Ablauf der Animation definiert.
Meistens wird die Kurzform animation genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.
| Initialwert | none |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Medien | visuell |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
| Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Syntax
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;
Werte
none- Keine Animation soll abgespielt werden. Dieser Wert ermöglicht das deaktivieren einer Animation, ohne die dazugehörigen Eigenschaften und Regeln zu ändern.
IDENT- Eine beliebige Zeichenkette aus den Buchstaben
abisz, Zahlen0bis9, Bodenstriche (_), und oder Bindestriche (-). Das erste Zeichen muss ein Buchstabe oder einer der beiden zugelassenen Striche sein. Es dürfen nicht zwei hintereinandeflogende Striche am Anfang stehen.
Formale Syntax
[ none | <keyframes-name> ]#wobei
<keyframes-name> = <custom-ident> | <string>
Beispiele
Siehe CSS Animationen für Beispiele.
Spezifikationen
| Spezifikation | Status | Anmerkung |
|---|---|---|
| CSS Animations Die Definition von 'animation-name' in dieser Spezifikation. |
Arbeitsentwurf | Ursprüngliche Definition |
Browser Kompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
| Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | (Ja)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.10 # |
4.0-webkit |
| Merkmal | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | ? | ? | ? | ? | ? |