关键帧效果：pseudoElement 属性

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。它已在浏览器中可用，自 2020 年 3 月.

pseudoElement 属性是 KeyframeEffect 接口的字符串，表示正在进行动画的伪元素。对于不针对伪元素的动画，它可能为 null。它既可以作为 getter 又可以作为 setter，但 CSS 生成的动画和过渡除外。

注意：如果设置为 :before、:after、:first-letter 或 :first-line 的传统单冒号语法，则该字符串将转换为其双冒号现代版本（::before、::after、::first-letter 和 ::first-line，分别）。

值

字符串或 null。

异常

SyntaxError DOMException

当尝试将此属性设置为元素、无效的伪元素（不存在或拼写错误）时抛出。然后该属性保持不变。

示例

html
<div id="text">Some text</div>
<pre id="log"></pre>
css
#text::after {
  content: "👹";
  display: inline-block; /* Needed as the `transform` property does not apply to inline elements */
  font-size: 2rem;
}
#text::before {
  content: "🤠";
  display: inline-block;
  font-size: 2rem;
}
js
const log = document.getElementById("log");
const text = document.getElementById("text");

// Create the keyframe and launch the animation
const animation = text.animate([{ transform: "rotate(360deg)" }], {
  duration: 3000,
  iterations: Infinity,
  pseudoElement: "::after",
});

// Get the value of KeyframeEffect.pseudoElement
function logPseudoElement() {
  const keyframeEffect = animation.effect;
  log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;
  requestAnimationFrame(logPseudoElement);
}

// Every 6 seconds, switch the pseudo-element animated
function switchPseudoElement() {
  const keyframeEffect = animation.effect;
  keyframeEffect.pseudoElement =
    keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
  setTimeout(switchPseudoElement, 6000);
}

switchPseudoElement();
logPseudoElement();

规范

规范
Web 动画
# dom-keyframeeffect-pseudoelement

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅