what is @ sign as a css selector?

Question

I saw this in a css file:

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

what do these selectors mean?

@keyframes it's not a class or id selector.

loading-spinner-anim - the space means it's a child element of the first selector. But it's not a class or id selector.

Reading [the documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) is always useful. — Teemu, Oct 03 '16 at 09:14

score 6 · Accepted Answer · answered Oct 03 '16 at 09:14

They are not selectors at all. They are at-rules and have many different purposes.

The particular example you have there is the keyframes at-rule which:

lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation.

Other at-rules include @import for loading external stylesheets, @charset for specifying the character encoding used by the stylesheet and @media for limiting when a collection of rulesets will be applied.

what is @ sign as a css selector?

1 Answers1