README.md

no-unused-keyframes

Disallow @keyframes that are never referenced in an animation-name or animation declaration.

@keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
/*         ↑
*          this name */

Declaring @keyframes that are never used adds dead code that increases file size and can cause confusion. This rule reports any @keyframes name that does not appear in an animation-name property or the name position of an animation shorthand.

Options

true

The following patterns are considered violations:

@keyframes slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

a { animation: 1s ease; }

The following patterns are not considered violations:

@keyframes slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

a { animation-name: slide-in; }

@keyframes slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

a { animation: slide-in 1s ease forwards; }

Secondary options

{ ignore: ["/regex/", "non-regex"] }

Ignore specific keyframe names by exact string or regular expression.

Given: { ignore: ["slide-in", /^fade/] }

The following patterns are not considered violations:

@keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

Prior art

• ESLint's no-unused-vars rule — same concept applied to CSS