stylelint-performance-animation

Stylelint rule for preventing the use of low performance animation

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
stylelint-performance-animation
5531.2.27 years ago7 years agoMinified + gzip package size for stylelint-performance-animation in KB

Readme

stylelint-performance-animation
!Build Statusci-imgci
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