Limit the number of unique keyframe animations defined across the stylesheet.
@keyframes fade-in { }
/* ↑↑↑↑↑↑↑
* This name counts as one unique keyframe */Using too many different keyframe animations can indicate an inconsistent animation system. This rule helps enforce a controlled set of animations derived from your design system.
A unique keyframe is the name used in an @keyframes rule. The same name used in multiple @keyframes blocks counts only once.
The maximum number of unique keyframes allowed. Must be a non-negative integer. Setting 0 enforces that no keyframes are defined at all.
Given:
2
the following are considered violations:
@keyframes fade-in { }
@keyframes fade-out { }
@keyframes slide-in { }The following patterns are not considered problems:
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-in { to { opacity: 1; } }
/* Both rules share the same keyframe name → only 1 unique entry */Vendor-prefixed at-rules such as @-webkit-keyframes are not counted. Only unprefixed @keyframes rules are considered.
@keyframes foo { } /* counted */
@-webkit-keyframes foo { } /* ignored */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 keyframe names to exclude from the count. Each entry can be an exact string or a regular expression matched against the full keyframe name.
Given:
[2, { "ignore": ["fade-in"] }]
the following are not considered problems:
@keyframes fade-in { } /* ignored */
@keyframes fade-out { }
@keyframes slide-in { }