Animar la propiedad de transición CSS dentro de:after/: before pseudo-clases

Google Chrome agregó la corrección del error de webkit a la versión 27.0.1453.110 m

Este error de WebKit fue corregido: http://trac.webkit.org/changeset/138632

ES POSIBLE animar pseudo :before y :after, aquí hay un par de ejemplos para animar los elementos psuedo :before y :after.

Aquí hay una modificación de su ejemplo anterior con algunas ediciones, que lo hacen animar hacia adentro y hacia afuera más suavemente sin la simulación mouseleave / mouseout retraso en hover:

Http://jsfiddle.net/MxTvw/234 /

Intente agregar el selector principal #foo con la pseudo-clase agrupada :hover en su segunda regla de pseudo-clase :hover. También agregue la propiedad transition, y no solo las propiedades prefijadas específicas del proveedor para transition:

#foo:after{
   display: block;
   content: '';
   width: 200px;
   height: 200px;
   background: red;
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
} 

#foo,
#foo:hover:after,
#foo:hover:before{
   width: 250px;
   height: 250px;
}

Tenga en cuenta que en el futuro cualquier Pseudo Elemento como :before y :after debe usar la sintaxis de dos puntos ::before y ::after. Este ejemplo simula un fundido de entrada y salida usando una superposición background-color y un background-image al flotar:

Http://jsfiddle.net/MxTvw/233 /

Este ejemplo simula una animación de rotación en hover:

Http://jsfiddle.net/Jm54S/28 /

Por supuesto, avanzando con los estándares css3 podríamos usar ::before y ::after.

Esto funciona en las últimas versiones de Firefox, Chrome, Safari, Opera 18+, IE10, IE11 (IE9 y versiones anteriores no admiten transiciones css3 ni animate.)

No parece funcionarahora, sin embargo, de acuerdo con las especificaciones W3 puede aplicar transiciones a pseudo-elementos. Tal vez en algún momento en el futuro {

Acabo de descubrir que puedes animar: after y: before (:

Ejemplo de código -

  .model-item {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: transparent;
      transition: all .3s;
    }
  }

  .opc {
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: rgba(0, 51, 92, .75);
    }
  }

Tengo el div .model-item y yo necesitábamos animar el suyo: after. Así que he añadido otra clase que cambia el fondo y he añadido el código de transición a la principal: después (antes de la animación)