Transiciones CSS con pseudo elementos:before y: after


Parece que no puede animar pseudo elementos con-webkit-transition. El violín a continuación muestra lo que quiero decir cuando se ejecuta en Chrome / Safari, supongo que esto no es compatible en este momento?

Http://jsfiddle.net/4rnsx/130/

Author: BoltClock, 2012-03-21

3 answers

Arreglado en Google Chrome el 3 de enero de 2013.

Por ahora (actualizo esta lista) está soportado en:

  • FireFox 4.0 y superior
  • Cromo 26 y superior
  • IE 10 y superior

Esperando a que Safari y Chrome para Android extraigan estas actualizaciones.

Puede probarlo usted mismo en su navegador, o

Consulte la tabla de soporte del navegador .

 17
Author: Dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-23 11:43:50

Bueno, en realidad, puedes.

Solo necesita aprovechar el valor a menudo olvidado inherit. Desafortunadamente no podemos (todavía) apuntar directamente a pseudo-elementos con animaciones personalizadas, pero seguramente podemos dejar que compartan la misma animación del elemento "padre" heredando las propiedades que deseamos animar.

Ver mi violín aquí.

 47
Author: Nobita,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-18 02:39:44
 8
Author: Doug Stephen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-21 03:10:52