!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

真的只有两个选择：

重写 CSS 代码以避免使用 !important
使用 JavaScript 个动画而不是 CSS 个动画。 JavaScript 解决方案将能够更改任何内联样式甚至文档级 stylesheets 如果需要

!important 关键帧动画

!important with keyframe animations

css

keyframe