Keyframe animations have a special role in the CSS cascade

I've been reading Josh's post The Big Gotcha With @starting-style and learned a new thing about CSS @keyframes.

Instead of doing specificity math for each built-in style, the browser treats them [the animation styles] as an entirely separate collection of CSS. They get applied first, and any CSS we write, no matter its specificity, will overwrite it.

Granted, I don't use keyframe animations very often, but what CSS collection is Josh talking about? The answer can be found on the MDN docs explaining the CSS cascade.

The cascading algorithm determines what properties to apply to an element in the following order:

1. user-agent (browser) normal
2. user normal
3. author (developer) normal
4. CSS keyframe animations
5. author (developer) !important
6. user !important
7. user-agent (browser) !important
8. CSS transitions

And keyframe animations have a higher precedence than any other "non-important" style. This behavior makes it quite handy to apply entry animations.

<button>
 Click me
</button>
<button>
 Click me
</button>

button {
  background: #1d5987;
  color: white;
  border: none;
  animation: appear 10s;
  padding: 1rem;
}

@keyframes appear {
  from {
    background: white;
    color: #1d5987;
  }
}
button {
  background: #1d5987;
  color: white;
  border: none;
  animation: appear 10s;
  padding: 1rem;
}

@keyframes appear {
  from {
    background: white;
    color: #1d5987;
  }
}

You can apply a keyframe animation that only defines from styles and can then automatically transition to the other applied properties. This keyframe transition works because keyframe styles are treated higher in the cascade algorithm. Well, today I learned!

If you apply !important styles, this doesn't work for the same cascade algorithm rules.

<button>
 Click me
</button>
<button>
 Click me
</button>

button {
  background: #1d5987 !important;
  color: white !important;
  border: none;
  animation: appear 10s;
  padding: 1rem;
}

@keyframes appear {
  from {
    background: white;
    color: #1d5987;
  }
}
button {
  background: #1d5987 !important;
  color: white !important;
  border: none;
  animation: appear 10s;
  padding: 1rem;
}

@keyframes appear {
  from {
    background: white;
    color: #1d5987;
  }
}

Keyframe animations won't overrule !important styles and slapping more !important properties into your keyframes won't work either.

<button>
 Click me
</button>
<button>
 Click me
</button>

button {
  background: #1d5987 !important;
  color: white !important;
  border: none;
  animation: appear 10s;
  padding: 1rem;
}

@keyframes appear {
  from {
    background: white !important;
    color: #1d5987 !important;
    padding: 0;
  }
}
button {
  background: #1d5987 !important;
  color: white !important;
  border: none;
  animation: appear 10s;
  padding: 1rem;
}

@keyframes appear {
  from {
    background: white !important;
    color: #1d5987 !important;
    padding: 0;
  }
}

Either way, Josh argues that for the mentioned reasons, @starting-style might be a mistake and the more I think of it, I think he's right.