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.
Currently animations do not play nicely with base-level styling, for instance if I animate the
backgroundColoron an element which already hasbackgroundthen I will not see mybackgroundColoranimations.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
divthat currently has an orange background via some CSS styling,background: orange;. If I wanted to apply some keyframes as follows: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.