!important with keyframe animations

Question

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?

Answer 1

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