css - !important 关键帧动画

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如有必要