Skip to main content

css/noImportantInKeyframes

Disallow !important in @keyframe rules.

stylelint Equivalent: keyframe-declaration-no-important

Examples

Invalid

@keyframes foo {
  from {
    opacity: 0;
    width: 0;
  }

  to {
    opacity: 1 !important;
    width: 100px !important;
  }
}

 filename.css:8:4 lint/css/noImportantInKeyframes  FIXABLE  ━━━━━━━━━━━━━━━

  Using !important within keyframes declarations is completely ignored
    in some browsers.

     7  to {
   > 8    opacity: 1 !important;
          ^^^^^^^^^^^^^^^^^^^^^^
   > 9    width: 100px !important;
      ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    10  }
    11}

  Safe fix

    1 1  to·{
    2  - opacity:·1·!important;
    3  - width:·100px·!important;
      2+ opacity:·1;
      3+ width:·100px;
    4 4  }

Valid

@keyframes foo {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}