Skip to main content

keyframe-selector-notation

Specify keyword or percentage notation for keyframe selectors.

@keyframes foo { from {} to {} }
/** ↑ ↑
* These notations */

The keyword from is equivalent to the value 0%. The keyword to is equivalent to the value 100%.

The fix option can automatically fix all of the problems reported by this rule.

Options

string: "keyword"|"percentage"|"percentage-unless-within-keyword-only-block"

"keyword"

Keyframe selectors must always use the keyword notation.

The following pattern is considered a problem:

@keyframes foo { 0% {} 100% {} }

The following pattern is not considered a problem:

@keyframes foo { from {} to {} }

"percentage"

Keyframe selectors must always use the percentage notation.

The following pattern is considered a problem:

@keyframes foo { from {} to {} }

The following pattern is not considered a problem:

@keyframes foo { 0% {} 100% {} }

"percentage-unless-within-keyword-only-block"

Keyframe selectors must use the percentage notation unless within a keyword-only block.

The following pattern is considered a problem:

@keyframes foo { from {} 100% {} }

The following patterns are not considered problems:

@keyframes foo { 0% {} 100% {} }
@keyframes foo { from {} to {} }