Was ist ein @ -Zeichen als CSS-Selektor?

Question

Ich sah dies in einer CSS-Datei:

@-webkit-keyframes loading-spinner-anim { 
    0% { opacity: 1} 
    100% {opacity: 0} 
} 
@keyframes loading-spinner-anim { 
    0% { opacity: 1} 
    100% {opacity: 0} 
} 

was bedeuten diese Wähler?

@keyframes es ist kein Klassen- oder ID-Selektor.

loading-spinner-anim - der Platz bedeutet, dass es ein untergeordnetes Element des ersten Selektors ist. Aber es ist kein Klassen- oder ID-Selektor.

Answer 1

Sie sind überhaupt keine Selektoren. Sie sind at-rules und haben viele verschiedene Zwecke.

Das spezielle Beispiel, das Sie haben, gibt es die keyframes at-rule welche:

können Autoren die Zwischenschritte in einer CSS-Animationssequenz steuern, indem Sie Keyframes (oder Wegpunkte) entlang der Animationssequenz Festlegung, die von bestimmten Punkten erreicht werden muss, während der Animation.

Andere at-Regeln beinhalten @import zum Laden externer Sheets, @charset zur Spezifizierung der Zeichencodierung durch das Sheet verwendet und @media zur Begrenzung, wenn eine Sammlung von rulesets angewendet wird.