We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

Initialwertnone
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie 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 a bis z, Zahlen 0 bis 9, 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 ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: teoli, Sebastianz, SJW
Zuletzt aktualisiert von: teoli,