Skip to main content

keyframes-name-pattern

Specify a pattern for keyframe names.

@keyframes slide-right {}
/**             ↑
 * The pattern of this */

Use this rule to enforce a convention. For example, require:

  • kebab-case names for consistency with the specifications' examples
  • a namespace, e.g. ^foo-, as @keyframes names are global and can collide across stylesheets

This rule supports 2 message arguments: the keyframes name and the configured pattern.

Options​

string​

Specify a regex string not surrounded with "/".

Given:

{
  "keyframes-name-pattern": "foo-.+"
}

The following patterns are considered problems:

@keyframes foo {}
@keyframes bar {}
@keyframes FOO-bar {}

The following patterns are not considered problems:

@keyframes foo-bar {}