Transitions CSS3 sur les pseudo-éléments (:après :avant) ne fonctionne pas?

Je suis en montrant la title attribut d'un lien sur :hover. L'attribut title est ajouté le lien par :after...

Maintenant, je me demande comment je peux animer l'opacité de la :after pseudo-élément lorsque le curseur de-dans et planant.

html

<a class="link" href="#" title="something"></a>​

css

.link {
    display:block;
    width:50px;
    height:50px;
    background:red;
}

.link:after {
    position:relative; 
    content: attr(title); 
    top:55px; 
    color:$blue; 
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}

.link:hover:after { 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 1;
}

Découvrez la démo: http://jsfiddle.net/d2KrC/

Des idées pourquoi cela ne fonctionne pas?

:before et :after sont des pseudo-éléments, :hover est une pseudo-classe. Ce sont deux concepts distincts, à ne pas confondre les uns avec les autres.
C'est un bogue documenté dans webkit. Découvrez ma réponse ci-dessous pour un hack pour réparer, et également le rapport de bug pour rester à jour sur son état de
Pas besoin d'-ms-transition. Cette propriété n'a jamais existé.

OriginalL'auteur matt | 2012-05-14

  1. 10

    WebKit (Chrome, Safari) ne prend pas en charge les transitions sur les pseudo-éléments.

    Il faut travailler dans Firefox.

    Edit: La question dans WebKit est maintenant résolu. Le patch déjà atterri dans Chrome Carnery, de sorte qu'il sera supportet à partir de la version 26. Je ne sais pas à propos de Safari.

    Ok, je vous remercie. J'espère qu'ils corriger cela au plus vite.
    il a été 2 ans. Je ne voudrais pas retenir mon souffle.
    L'Animation n'est pas le cas pour iphone/ipad IOS 8, des idées?

    OriginalL'auteur Jona

  2. 5

    Theres assez simple solution de contournement pour ce webkit bug pour faire des transitions de travail sur les pseudo classes. Voici un excellent billet de blog à ce sujet: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

    Fondamentalement webkit ne supporte pas les transitions directement, mais vous pouvez appliquer la transition et le style que vous souhaitez modifier à son élément parent. Puis, dans la pseudo classe que vous mettez les mêmes propriétés de style que vous souhaitez affecter, mais leur donner la valeur: hériter. Qui les amèneront à hériter de tous les éléments parents de valeurs, y compris la transition.

    Voici un exemple que j'ai fait pour animer l' :après élément, en haut et en bas

    a { 
    position: static; /* explicitly defined so not to forget that it can't be relative or :after transition hack will not work */
    top: 1px; /*doesnt move it because it is position static */
    -webkit-transition: top 200ms ease 0;
}
a:after {
    content: '';
    position: absolute;
    top: inherit;
}
a:hover {
    top: 3px;
}

    *Mise à jour
    Le bogue a été corrigé dans google Chrome Canary (en février), mais tout semble être rompu dans Safari. Pouvez vérifier l'état et de rester à jour sur le sujet ici:
    https://code.google.com/p/chromium/issues/detail?id=54699

    OriginalL'auteur DMTintner