7

The spec for keyframe animations says that !important will be ignored in keyframes -- it's invalid if set inline in the animation declaration.

From the example spec:

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* ignored */
  to   { margin-top: 100px; }
}

@keyframes important2 {
  from { margin-top: 50px;
         margin-bottom: 100px; }
  to   { margin-top: 150px !important; /* ignored */
         margin-bottom: 50px; }
}

Is there a known workaround to this?

Union find
  • 7,759
  • 13
  • 60
  • 111
  • 6
    The workaround is to fix your CSS so the `!important` isn't necessary – Dave Dec 10 '15 at 20:28
  • 2
    What are you trying to achieve? Your example doesn't really make sense, as why would you need the `margin-top` to be `!important` only at certain stages of the animation? It's not really going to change anything, even if it wasn't ignored. I understand that this might just be some example code that does nothing, just to illustrate the question, but I think the main thing we need to know is just "What are you trying to do that you think you would need this?" And maybe we can help you from that front instead. – Blake Mann Dec 10 '15 at 20:33
  • @BlakeMann That's not my example. That's from the spec. – Union find Dec 10 '15 at 23:25
  • @dave Fair, but sometimes you need a quick fix. – Union find Dec 10 '15 at 23:26
  • 1
    @Incodeveritas Fair enough, but my point still stand... what are you actually trying to achieve, that you might need something like this? – Blake Mann Dec 10 '15 at 23:47
  • @BlakeMann There's deeply nested sass that needs a rewrite. So, we're applying a class with a keyframe to an existing div structure to change the behavior. Sometimes the editorializing on SO is a bit over the top. In this case, I just want to solve my problem directly -- not be lectured on obvious design flaws. – Union find Dec 11 '15 at 03:11
  • @Incodeveritas I think you misunderstand... I'm not trying to give you a lecture, I'm just trying to find out what the root of your problem actually is so that someone might actually be able to help you with it. You are asking for a workaround, but the only suggested workaround you are getting at this point is "Fix your CSS" because we don't know what your CSS is to suggest anything more specific, and we don't know what your specific problem is. If you don't wish to expand on it though, that's fine by me, and I'll leave it at that. – Blake Mann Dec 11 '15 at 15:47

1 Answers1

7

There are really only two options:

  1. Rewrite the CSS code to avoid the use of !important
  2. Use JavaScript animations instead of CSS animations. A JavaScript solution would be able to alter any inline styles or even document-level stylesheets if necessary
Dave
  • 10,748
  • 3
  • 43
  • 54