CoverT 36: !important Doesn't Work With Animations

CSS

Mar 18, 2020

code

codeInteractive Code Example

Using !important with an animation style does not work at all. It’s not only un-important; it totally ignores the style altogether.

Example

<div class="my-box">
  <span>same color</span>
</div>

.my-box {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: yellow;

  animation-name: notImportant;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes notImportant {
  to {
    background: green;
    font-size: 30px;
    color: red !important;
  }
}

Result

same color