CSSKeyframeRule

The CSSKeyframeRule interface represents a single keyframe within a CSS @keyframes at-rule. It inherits properties and methods from its parent, CSSRule. The CSSKeyframeRule interface is used to programmatically read and modify the keyframes of an animation.

A CSSKeyframeRule object can be retrieved using the CSSKeyframesRule.cssRules property, which returns a CSSRuleList of all the CSSRule objects for the keyframes. Each CSSRule in the list is a CSSKeyframeRule object.

The CSSKeyframeRule interface has the following properties:

keyText: A string representing the keyframe's key-text, which is the percentage or keyword that defines the point in the animation where the keyframe occurs.

style: A CSSStyleDeclaration object representing the set of CSS properties that make up the keyframe.

The CSSKeyframeRule interface also has the following methods:

appendRule(rule): Appends a new rule to the end of the keyframe's rule list.

deleteRule(index): Deletes the rule at the specified index from the keyframe's rule list.

findRule(rule): Returns the index of the first rule in the keyframe's rule list that matches the specified rule, or -1 if no such rule is found.

The CSSKeyframeRule interface is an important part of the CSS Object Model (CSSOM) and is used to programmatically create and manipulate animations in web pages.