主页 / 问题 / 646891
Accepted
Vyacheslav Potseluyko
Asked:2020-04-01 01:44:11 +0000 UTC2020-04-01 01:44:11 +0000 UTC

未定义关键帧

  • 772
@keyframes rot {
  0% {
    background-color: #000 !important;
  }
  100% {
    background-color: #c0c0c0 !important;
  }
}

#telegramSiteHelperChatLabel
  animation-name rot
  animation-duration 2s
  animation-iteration-count infinite

写上stylus前缀nib，它把自己。在 chrome 控制台中我看到了这个（sv-va chrome 的非特征被划掉了，其余的是有效的）

-webkit-animation-name: rot;
-moz-animation-name: rot;
-o-animation-name: rot;
-ms-animation-name: rot;
animation-name: rot;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;

我看到的关键帧面板中稍微低一点

0% {
}
main.css:1041
100% {
}
main.css:1044

从上面的插入内容来看，这些行似乎具有有效的 St. Islands。有趣的是，如果将相同的代码手动添加到控制台，则一切正常。

怎么了？打破了我的整个脑袋。如果需要，我可以给出真实项目的url。

如果你删除 !important 并且让background一切变得超级。为什么？！

css

1 个回答

  1. Best Answer

    你想做的不是根据 W3C 标准。

    该规范描述了哪些关键帧!important被忽略：

    关键帧规则的关键帧声明块由属性和值组成。.... 此外，忽略带有 !important 限定的关键帧规则声明。

    你到底想用它做什么important？动画已经具有比以下更高的优先级important：

    @keyframes rot {
  0% {
    background-color: #000;
  }
  100% {
    background-color: #c0c0c0;
  }
}

div {
  background-color: red !important;
  animation: rot 2s infinite;
}
    <div>test</div>

    好吧，Firefox 除外，顺便说一下，它符合这个意义上的标准：

    动画会覆盖所有常规规则，但会被 !important 规则覆盖。

    • 1

相关问题