README.md

Max unique animation functions

Limit the number of unique animation timing functions used across the stylesheet.

a { animation-timing-function: ease; }
/*                              ↑
*   "ease" counts as a unique animation timing function */

Using too many different timing functions can indicate an inconsistent design system. This rule helps enforce a controlled set of easing values.

Each individual timing function value is counted separately. Comma-separated lists (e.g. animation-timing-function: ease, linear) are split into individual values.

The following CSS properties are checked:

• animation-timing-function
• transition-timing-function
• animation (shorthand)
• transition (shorthand)

Note: Timing functions are compared by their exact string value. ease and cubic-bezier(0.25, 0.1, 0.25, 1) are treated as two distinct values.

Options

Number (required)

The maximum number of unique animation timing functions allowed. Must be a positive integer.

Given:

2

the following are considered violations:

a { animation-timing-function: ease; }
b { animation-timing-function: linear; }
c { animation-timing-function: ease-in; }

The following patterns are not considered problems:

a { animation-timing-function: ease; }
b { transition-timing-function: ease; }

ignore (optional)

Type: Array<string | RegExp>

Strings wrapped in / delimiters (e.g. "/^red/", "/^red/i") are treated as regular expressions. This allows regex patterns in JSON config files without needing a .mjs config.

A list of timing function values to exclude from the count. Each entry can be an exact string or a regular expression.

Note: String patterns are matched against the exact string value of the detected timing function.

Given:

[1, { "ignore": ["ease"] }]

the following is not considered a violation:

a { animation-timing-function: ease; }
b { animation-timing-function: linear; }