# stylelint-high-performance-animation

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

Latest version **2.0.0** (published 2026-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install stylelint-high-performance-animation
pnpm add stylelint-high-performance-animation
yarn add stylelint-high-performance-animation
bun add stylelint-high-performance-animation
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-01-25 |
| First published | 2018-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 87 |
| Author | Krister Kari |
| Maintainers | kristerkari |
| Keywords | css, less, lint, linter, scss, stylelint, stylelint-plugin, sugarss, performance, animation, transition |

## Links

- npm: https://www.npmjs.com/package/stylelint-high-performance-animation
- Repository: https://github.com/kristerkari/stylelint-high-performance-animation
- Homepage: https://github.com/kristerkari/stylelint-high-performance-animation#readme
- Issues: https://github.com/kristerkari/stylelint-high-performance-animation/issues
- npm.io page: https://npm.io/package/stylelint-high-performance-animation

## Dependencies (1)

- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2026-01-25
- 1.11.0 — 2025-02-21
- 1.10.0 — 2023-12-26
- 1.9.0 — 2023-08-08
- 1.8.0 — 2023-02-13
- 1.7.0 — 2022-12-08
- 1.6.0 — 2021-11-12
- 1.5.2 — 2020-11-06
- 1.5.1 — 2020-04-21
- 1.5.0 — 2020-03-02
- 1.4.0 — 2019-11-27
- 1.3.0 — 2019-10-18
- 1.2.1 — 2019-05-08
- 1.2.0 — 2019-04-19
- 1.1.1 — 2018-09-05
- … 2 more at https://npm.io/package/stylelint-high-performance-animation/versions

## README

# stylelint-high-performance-animation

[![NPM version](https://img.shields.io/npm/v/stylelint-high-performance-animation.svg)](https://www.npmjs.com/package/stylelint-high-performance-animation)
[![Build Status](https://github.com/kristerkari/stylelint-high-performance-animation/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/kristerkari/stylelint-high-performance-animation/actions?workflow=Tests)
[![Downloads per month](https://img.shields.io/npm/dm/stylelint-high-performance-animation.svg)](http://npmcharts.com/compare/stylelint-high-performance-animation?periodLength=30)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)

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

This is a fork of [stylelint-performance-animation](https://github.com/konstantin24121/stylelint-performance-animation) stylelint plugin. It uses a blacklist for harmful properties instead of a whitelist, which makes it easy to avoid false positives and allows you to specify which type of properties to warn for (`layout`/`paint`).

## Install

```sh
npm install stylelint-high-performance-animation --save-dev
```

or

```sh
yarn add stylelint-high-performance-animation --dev
```

## Usage

Add this config to your `.stylelintrc` or stylelint config inside `package.json`:

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

## Details

```css
div {
  transition: margin 350ms ease-in;
}
/**           ^^^^^^
 * You should not use low performance animation properties */
```

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

For more information [read article](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) By Paul Lewis and Paul Irish

### Options

#### `true`

The following pattern is considered warning:

```css
div {
  transition: margin-left 350ms ease-in;
}
```

The following pattern is _not_ considered warning:

```css
div {
  transition: transform 350ms ease-in;
}
```

### Optional secondary options

#### `ignore: "paint-properties"`

Makes the rule not warn for properties that cause `paint` and only warn for properties that cause `layout`.

#### `ignoreProperties: [string]`

Given:

`{ ignoreProperties: ['color', 'background-color'] }`

The following pattern is considered warning:

```css
div {
  transition-property: color, margin;
}
```

The following pattern is _not_ considered warning:

```css
div {
  transition-property: color, opacity, background-color;
}
```

## Dependencies

This plugin has only [stylelint](https://github.com/stylelint/stylelint) as a dependency.

---

## License

MIT

---
_Source: https://npm.io/package/stylelint-high-performance-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._