Specificity

[tsujp]

Currently animations do not play nicely with base-level styling, for instance if I animate the backgroundColor on an element which already has background then I will not see my backgroundColor animations.

Can we have an option to set the specificity of animate to the highest level possible, equivalent to !important in some ways, such that our animations take precedence?

As an example, consider a div that currently has an orange background via some CSS styling, background: orange;. If I wanted to apply some keyframes as follows:

const getKeyframes = [
  { backgroundColor: 'green' },
  { backgroundColor: 'red' }
]

I would not see the green to red change until I remove the background: orange; style rule.

Currently the only workaround to this is to use fill: 'forward' and to apply any base styles there with extra attributes to persist anything we don't want changing from the first keyframe.