CSS3は擬似要素で遷移します（：after、：before）not working？

Question

私は:hoverにリンクのtitle属性を示しています。 title属性は

は、今私は-でホバリングし、ホバリングアウト時に、私は :after擬似要素の不透明度をアニメーション化することができますどのように思ったんだけど... :afterを経由して、リンクに追加されます。

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

はデモをチェックアウト：これが機能しない理由http://jsfiddle.net/d2KrC/

任意のアイデア？

Answer 1

WebKit（Chrome、Safari）は、疑似要素の遷移をサポートしていません。

• https://bugs.webkit.org/show_bug.cgi?id=23209
• http://code.google.com/p/chromium/issues/detail?id=54699

これは、Firefoxで動作するはずです。

編集： WebKit is now resolvedの問題。パッチはChrome Carneryにすでに着陸しているので、バージョン26以降のサポートを受ける予定です。私はSafariについて知らない。

Answer 2

このWebkitのバグは、擬似クラスでの遷移を行うための非常に簡単な回避策です。 http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

基本的に、Webkitではトランジションを直接サポートしていませんが、変更したいトランジションとスタイルを親エレメントに適用することができます。次に、擬似クラスでは、影響を与えたいのと同じスタイルプロパティを設定しますが、継承する値を与えます。これにより、トランジションを含むすべての親要素の値が継承されます。

ここで私がアニメーション化しなかったサンプルです：要素の後、上下

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

はバグが（2月現在）クロームカナリアに固定し、まだ中に壊れているように見えるされたアップデート *サファリ。状態を確認して更新しておくことができます： https://code.google.com/p/chromium/issues/detail?id=54699