soy Kseso y esto EsCSS

Cómo animar pseudoelementos en Chrome

Cómo lograr animar con puro Css (animation/transition) los pseudoelementos en el navegador Chrome pese a que de momento sólo Firefox soporta esta posibilidad.

Cómo animar pseudoelementos en Chrome

Por Kseso ✎ 1

Como todo el mundo sabe bien, sólo Firefox aplica las animaciones y transiciones a los pseudoelementos. Pero ésta limitación se puede solventar fácilmente. Sólo es necesario hacer uso del valor inherit para obrar la magia

Pero antes de meternos con las explicaciones, mira la demo, obra de Joshua Hibbert en codepen:

En el iframe del ejemplo, pincha en la pestaña "CSS" para ver los estilos.

Como puedes ver, la transición no se aplica al pseudoelemento si no al propio enlace, que aplica el valor de bottom al :hover, :focus. Mientras que para el pseudoelemento :after en todo momento aplica para esa propiedad de posicionamiento el valor en inherit.

Sencillo e ingenioso, ¿verdad?

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 1

  1. Hace un buen rato que no tengo problemas con animar pseudoelementos en Chrome, aunque no estoy seguro desde qué versión. Con el que sigo peleando es con Opera, que al menos hasta la 12.16 no la interpreta.
    Probé el pen que está aquí y salta el '::hover', pero sin animación; así que éste truco tampoco funciona.
    Estuve haciendo un ícono animado, y cuando descubrí que en el motor Presto no arrancaba casi te lo mando para ver si se te ocurría algo, pero después vi que en la web se quejan bastante de esto y no ponen soluciones. Así que no debe haber.

    Al fin tuve que cambiar la 'animation' al 'span', posicionar '::after' y '::before' con respecto al párrafo contenedor, y compensar el movimiento del texto que le seguía al ícono con el movimiento inverso en el margen, para que simule que se queda quieto, y no que es arrastrado por el vaivén del elemento anterior.

    Demasiado trabajo; casi prefiero aguardar a que la gente de Opera corrija el bug.
    :-P

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap