Skip to content
Stylelint rule for preventing the use of low performance animation
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

stylelint-performance-animation

Build Status

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

You can’t perform that action at this time.