The CSSKeyframesRule
interface describes an object representing a complete set of keyframes for a CSS animation. It corresponds to the contents of a whole @keyframes
at-rule
.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/CSSRule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">CSSRule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule" target="_top"><rect x="116" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">CSSKeyframesRule</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
Inherits properties from its ancestor CSSRule
.
CSSKeyframesRule.name
- Represents the name of the keyframes, used by the
animation-name
property. CSSKeyframesRule.cssRules
Read only- Returns a
CSSRuleList
of the keyframes in the list.
Methods
Inherits methods from its ancestor CSSRule
.
CSSKeyframesRule.appendRule()
- Inserts a new keyframe rule into the current CSSKeyframesRule. The parameter is a
DOMString
containing a keyframe in the same format as an entry of a@keyframes
at-rule. If it contains more than one keyframe rule, aDOMException
with aSYNTAX_ERR
is thrown. CSSKeyframesRule.deleteRule()
- Deletes a keyframe rule from the current CSSKeyframesRule. The parameter is the index of the keyframe to be deleted, expressed as a
DOMString
resolving as a number between0%
and100%
. CSSKeyframesRule.findRule()
- Returns a keyframe rule corresponding to the given key. The key is a
DOMString
containing an index of the keyframe to be returned, resolving to a percentage between0%
and100%
. If no such keyframe exists,findRule
returnsnull
.
Example
The CSS includes a keyframes at-rule. This will be the first CSSRule
returned by document.styleSheets[0].cssRules
.
myRules[0]
returns a CSSKeyframesRule
object.
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations Level 1 The definition of 'CSSKeyframesRule' in that specification. |
Working Draft | Initial definition |
Browser compatibility
BCD tables only load in the browser