！关键帧动画很重要

Question

关键帧动画的规范says !important将在关键帧中被忽略 - 如果在动画声明中设置为内联，则无效。

来自示例规范：

@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; }
}

这是否有一个已知的解决方法？

Answer 1

实际上只有两个选择：

1. 重写CSS代码以避免使用!important
2. 使用JavaScript动画而不是CSS动画。 JavaScript解决方案可以更改任何内联样式，甚至可以在必要时更改文档级stylesheets