Pseudoelementos en la API de animaciones web

Para utilizar la API de animaciones web (por ejemplo el.animate()), necesita una referencia a un elemento DOM al que apuntar. Entonces, ¿cómo se usa en pseudoelementos, que en realidad no ofrecen una referencia directa? Dan Wilson cubre una parte (¿nueva?) de la propia API:

const logo = document.getElementById('logo');logo.animate({ opacity: [0, 1] }, {  duration: 100,  pseudoElement: '::after'}); 

Note en el artículo de Dan que ::markeres compatible. Estuve jugando con eso recientemente mientras hacía nuestra página de Recetas de estilo de lista. Pensé en darle una vuelta probando WAAPI y @keyframesen un elemento ::markery ::after:

Al principio, me confundí porque parecía que WAAPI no funcionaba ::after, pero me acordé de que cuando lo uso transform, el elemento no puede ser display: inline. En cambio, lo hice inline-blocky funcionó bien. Sin embargo, descubre que eso @keyframesno parece funcionar en ::markerelementos de Firefox; Espero que lo solucionen (y obtengamos soporte para Chrome y Safari ::markerlo antes posible).

Enlace directo →