要使用 Web 动画 API（例如 el.animate()），您需要一个指向目标 DOM 元素的引用。 那么，如何在伪元素上使用它呢？ 伪元素并没有提供直接引用。 Dan Wilson 介绍 了 API 本身的一个（新的？）部分
const logo = document.getElementById('logo');
logo.animate({ opacity: [0, 1] }, {
duration: 100,
pseudoElement: '::after'
});我在 Dan 的文章中注意到 ::marker 是受支持的。 我最近在做我们的 列表样式配方 页面时，一直在玩这个。 我想通过在 ::marker 和 ::after 元素上测试 WAAPI 和 @keyframes 来试一试。
一开始，我把自己搞糊涂了，因为看起来 WAAPI 似乎没有在 ::after 上起作用，但 Dan 提醒我，当使用 transform 时，元素不能是 display: inline。 相反，我将其设为 inline-block，它就正常工作了。 不过，我确实发现 @keyframes 似乎在 Firefox 中的 ::marker 元素上不起作用 - 希望他们能解决这个问题（而且我们尽快在 Chrome 和 Safari 中获得对 ::marker 的支持）。