CSS Cascade: !important vs animation

Question

In the CSS Cascading and Inheritance module it is explained that the declarations with the !important annotation have a greater importance than the styles whose origin is an animation.

When testing on my own I realize that no style can prevent a css property from being overwritten when the animation is running.

Example:

.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>

In this example when the animation is running the background-color is changed.

If I use animation-fill-mode: forwards to make the value given in the last keyframe be retained by the element this value will be overwriting the value with !important.

This behavior seems to me contrary to what the specification says or perhaps I have not understood what they are trying to say.

Answer 1

This makes sence since the animation is a transformation, and the background color is a state. if you want to disable the animation you can overwrite this also. They are simply 2 diffent things. Basicly the box is green before and after the animation, just not during.