web-dev-qa-db-fra.com

Animer la propriété de transition CSS dans: après /: avant les pseudo-classes

Est-il possible d'animer des pseudo-classes CSS?

Dis que j'ai:

#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;
}

Est-ce seulement possible? J'ai testé et jusqu'à présent, je n'arrive pas à trouver de solution. J'essaie de réduire la quantité de support JavaScript dont j'ai besoin en utilisant Modernizr.

J'ai déjà une méthode JavaScript, veuillez donc pas d'alternatives JavaScript.

Démo : http://jsfiddle.net/MxTvw/

csscss3css-transitionspseudo-element
29
daryl

Votre violon fonctionne pour moi dans Firefox. Et pour autant que je sache, et si cet article est à jour c'est le seul navigateur capable d'animer des pseudo-éléments.

[~ # ~] modifier [~ # ~] : depuis 2016, le lien vers l'article est rompu et le bogue WebKit pertinent était fixe il y a 4 ans . Lisez la suite pour voir d'autres réponses, celle-ci est obsolète.

11
Litek

Google Chrome a ajouté le correctif de bogue webkit à la version 27.0.1453.110 m

Ce bogue WebKit a été corrigé: http://trac.webkit.org/changeset/138632

IT IS POSSIBLE pour animer la pseudo :before et :after, voici quelques exemples d'animation des éléments pseudo :before et :after.

Voici une modification de votre exemple ci-dessus avec quelques modifications, qui le rendent plus fluide et plus animé sans le délai simulé de mouseleave/mouseout au survol:

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

Essayez d'ajouter le sélecteur principal #foo avec le groupe :hover pseudo-classe dans votre deuxième :hover règle de pseudo-classe. Ajoutez également la propriété transition, et pas seulement les propriétés préfixées spécifiques au fournisseur pour 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;
}

Notez qu'à l'avenir, tout pseudo-élément comme :before et :after doit utiliser la syntaxe à deux points ::before et ::after. Cet exemple simule un fondu entrant et sortant à l'aide d'une superposition background-color et un background-image En vol stationnaire:

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

Cet exemple simule une animation de rotation en survol:

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

Bien sûr, pour aller de l'avant avec les normes CSS3, nous pourrions utiliser ::before et ::after.

Cela fonctionne dans les derniers Firefox, Chrome, Safari, Opera 18+, IE10, IE11 (IE9 et inférieur ne le font pas prendre en charge les transitions css3 ou animer.)

12
Jonathan Marzullo

Cela ne semble pas fonctionner maintenant, cependant selon les spécifications W vous pouvez appliquer des transitions aux pseudo-éléments. Peut-être dans le futur…

0
Lapple