伪元素(:after， :before)上的 CSS3 转换不起作用

Question

我正在:hover上显示链接的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

它应该在火狐中工作。

编辑：WebKit中的问题现已解决。补丁全部准备就绪登陆Chrome Carnery，因此它将从版本26开始支持。我不知道 Safari。

Answer 2

这个webkit错误有一个相当简单的解决方法，可以使转换在伪类上工作。这里有一篇很棒的博客文章：http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

基本上 webkit 不直接支持过渡，但您可以将要更改的过渡和样式应用于其父元素。然后在伪类中放置要影响的相同样式属性，但赋予它们值：继承。这将导致它们继承所有父元素值，包括转换。

这是我为向上和向下对 ：after 元素进行动画处理的示例

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

*更新该错误已在Chrome Canary中修复（截至2月），但在Safari中似乎仍然被破坏。可以在此处检查状态并随时了解最新信息：https://code.google.com/p/chromium/issues/detail?id=54699