Animare la proprietà di transizione CSS all'interno: after /: before pseudo-classes

Question

È possibile animare le pseudo-classi CSS?

Dire che ho:

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

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

Questo è anche possibile? Ho provato e finora non riesco a trovare una soluzione. Sto cercando di ridurre la quantità di supporto JavaScript di cui ho bisogno usando Modernizr.

Ho già un metodo JavaScript, quindi per favore nessuna alternativa JavaScript.

Demo: http://jsfiddle.net/MxTvw/

Answer 1

Il tuo violino funziona per me in Firefox. E per quanto ne so, e se this article è aggiornato, questo è l'unico browser in grado di animare pseudo-elementi.

---

EDIT: A partire dal 2016, il link per l'articolo è rotto e la relevant WebKit bug era fixed4 anni fa. Continua a leggere per vedere altre risposte, questa è obsoleta.

Answer 2

E does not seem to work ora, tuttavia secondo il W3 specs è possibile applicare transizioni pseudo-elementi. Forse un po 'di tempo in futuro ...

Answer 3

Google Chrome ha aggiunto la correzione WebKit bug alla versione 27.0.1453.110 m

Questo bug WebKit è stato risolto: http://trac.webkit.org/changeset/138632

E 'POSSIBILE per animare pseudo :before e :after, ecco un paio di esempi per l'animazione degli psuedo-elementi :before e .

Ecco una modifica del vostro esempio di cui sopra con alcune modifiche, che lo rendono animare dentro e fuori più agevolmente senza l'simulato mouseleave/mouseout ritardo hover:

http://jsfiddle.net/MxTvw/234/

Prova ad aggiungere il selettore principale #foo con la pseudo-classe raggruppata :hover nella seconda regola pseudo-classe :hover. Aggiungere anche la proprietà transition, e non solo il venditore specifica proprietà con il prefisso per 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; 
} 

Nota che andando avanti tutti gli elementi pseudo come :before e :after dovrebbe usare la sintassi doppio colon ::before e ::after.Questo esempio simula un fade in e out con un overlay background-color e un background-image al passaggio del mouse:

http://jsfiddle.net/MxTvw/233/

Questo esempio simula un animato di rotazione al passaggio del mouse:

http://jsfiddle.net/Jm54S/28/

Naturalmente andare avanti con gli standard css3 potremmo usare ::before e ::after.

Questo funziona in ultima Firefox, Chrome, Safari, Opera 18+, IE10, IE11 (IE9 e al di sotto non supportano le transizioni CSS3 o animare.)

Answer 4

ho appena scoperto che è possibile animare: dopo e: prima (:

Codice esempio-

.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); 
    } 
    } 

ho la .model-item div e avevo bisogno di animare la sua:. dopo Così ho aggiunto un'altra classe che cambia sfondo e ho aggiunto il codice di transizione al principale: dopo (prima dell'animazione)