html - CSS Cascade: !important 与动画

Question

在 CSS Cascading and Inheritance 模块中，解释了带有 !important 注释的声明比起源于动画的样式更重要。

当我自己进行测试时，我意识到没有任何样式可以防止动画运行时覆盖 css 属性。

例子：

.box{
  background-color: green!important;
  animation: animacion 2s; 
  height: 50px;
  width: 50px;
}
@keyframes animacion {
  from{
    background-color: yellow;
  }
  to{
    background-color: blue;
    margin-left: 50px;
  }
}

<div class="box"></div>

在此示例中，当动画运行时，background-color会更改。

如果我使用animation-fill-mode: forwards元素保留最后一个关键帧中给出的值，则该值将用!important.

在我看来，这种行为与规范所说的相反，或者我可能不明白他们想说什么。

Answer 1

这是有道理的，因为动画是一种变换，而背景颜色是一种状态。如果你想禁用动画，你也可以覆盖它。它们只是两个不同的东西。基本上，在动画之前和之后，盒子都是绿色的，只是不是在动画期间。