伪元素 (:after, :before) 上的 CSS3 过渡不起作用？答案

【问题标题】：CSS3 transitions on pseudo-elements (:after, :before) not working?伪元素 (:after, :before) 上的 CSS3 过渡不起作用？
【发布时间】：2012-05-21 15:32:50
【问题描述】：

我在: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/

任何想法为什么这不起作用？

【问题讨论】：

:before 和 :after 是伪元素，:hover 是伪类。这是两个不同的概念，不要相互混淆。
这是 webkit 中记录的错误。在下面查看我的答案以修复黑客，以及错误报告以保持其状态的更新
不需要-ms-transition。该属性从未存在过。

标签： css css-transitions pseudo-element

【解决方案1】：

WebKit（Chrome、Safari）不支持伪元素的过渡。

它应该可以在 Firefox 中运行。

编辑： WebKit is now resolved 中的问题。该补丁已经登陆 Chrome Carnery，因此将从版本 26 开始支持。我不知道 Safari。

【讨论】：

已经 2 年了。我不会屏住呼吸。
动画似乎不适用于 iphone/ipad IOS 8，有什么想法吗？
仍然无法在 Safari 浏览器中进行伪元素的转换

【解决方案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

【讨论】：