stylelint-performance-animation

Stylelint rule for preventing the use of low performance animation and transition.

Install

npm install stylelint-performance-animation --save-dev

or

yarn add stylelint-performance-animation --save-dev

Usage

Add this config to your .stylelintrc:

{
  "plugins": [
    "stylelint-performance-animation"
  ],
  "rules": {
    "plugin/no-low-performance-animation": true
  }
}

Details

div { transition: margin 350ms easy }
/**               ^^^^^^
 * You should not use low performance animation properties */

@keyframes { 50% { top: 5px; } }
/**                ^^^^^^
 * You should not use low performance animation properties */

For more information read article By Paul Lewis and Paul Irish

Options

true

The following pattern is considered warning:

div { transition: margin-left 350ms easy; }

The following pattern is not considered warning:

div { transition: transform 350ms easy; }

Optional secondary options

ignore: [string]

Given:

{ ignore: ['color', 'background-color'] }

The following pattern is considered warning:

div { transition: color, margin; }

The following pattern is not considered warning:

div { transition: color, opacity, background-color; }

License

MIT © Vinston Wolf