CSSKeyframeRule: keyText property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.
The keyText property of the CSSKeyframeRule interface represents the keyframe selector as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively.
Value
A string.
Exceptions
SyntaxError-
Thrown if
keyTextis updated with an invalid keyframe selector, in which casekeyTextremains untouched.
Examples
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, which will contain individual CSSKeyFrameRule objects for each keyframe.
css
@keyframes slide-in { from { transform: translateX(0%); } to { transform: translateX(100%); } } js
let myRules = document.styleSheets[0].cssRules; let keyframes = myRules[0]; // a CSSKeyframesRule console.log(keyframes[0].keyText); // a string containing 0% Specifications
| Specification |
|---|
| CSS Animations Level 1 # dom-csskeyframerule-keytext |
Browser compatibility
Loading…