Specificity: Animation Declarations

28 Jan 2022 • 1 min

Specificity can be super confusing, and just when I think I have it really nailed down I learn something new. I'm not sure that I'm going to use this very often, but I didn't know that you can override style declarations with animation declarations. For example:

/* Animation declarations take precedence over normal declarations */
body {
  animation: bg 0s forwards;
}
@keyframes bg {
  to {
    background: yellow;
  }
}

/* This is overridden by the animation declaration above */
body {
  background: crimson;
}

In this example the background would be yellow because body has the animation declaration on it that overrides the crimson lower in the file eventough they have the same level of specificity.

Learn More

I picked up this wonderful bit of knowledge from Manuel Matuzović on his blog post about CSS Specificity. You should take a look at it, too.