Why is this an issue?

Each rule inside an @keyframes block defines the animation state for a specific point on the timeline. Repeating the same keyframe selector in a single block makes the animation harder to understand because the same step is defined in multiple places.

This can hide bugs and make maintenance harder, especially when the duplicates differ only by letter case.

Noncompliant code example

@keyframes fade {
  from {
    opacity: 0;
  }
  FROM { /* Noncompliant: duplicated keyframe selector */
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

Compliant solution

@keyframes fade {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

Resources

Documentation