CSS 伪元素 (:after, :before) 上的 CSS3 转换不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10578424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transitions on pseudo-elements (:after, :before) not working?
提问by matt
I'm showing the titleattribute of a link on :hover. The title attribute is appended to the link via :after…?
我在 上显示title链接的属性:hover。标题属性通过:after...附加到链接上？
Now I'm wondering how I can animate the opacity of the :afterpseudo-element when hovering-in and hovering-out.
现在我想知道如何:after在悬停和悬停时为伪元素的不透明度设置动画。
html
html
<a class="link" href="#" title="something"></a>?
css
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;
}
Check out the demo: http://jsfiddle.net/d2KrC/
查看演示：http: //jsfiddle.net/d2KrC/
Any ideas why this is not working? ?
任何想法为什么这不起作用？?
采纳答案by Jona
WebKit (Chrome, Safari) does not support transitions on pseudo elements.
WebKit（Chrome、Safari）不支持伪元素上的转换。
- https://bugs.webkit.org/show_bug.cgi?id=23209
- http://code.google.com/p/chromium/issues/detail?id=54699
- https://bugs.webkit.org/show_bug.cgi?id=23209
- http://code.google.com/p/chromium/issues/detail?id=54699
It should work in Firefox.
它应该在 Firefox 中工作。
Edit:The issue in WebKit is now resolved. The patch allready landed in Chrome Carnery, so it will be supportet from version 26 on. I don't know about Safari.
编辑：WebKit 中的问题现已解决。该补丁已经登陆 Chrome Carnery，所以从 26 版本开始支持。我不知道 Safari。
回答by DMTintner
Theres a fairly easy workaround to this webkit bug to make transitions work on pseudo classes. Here's a great blog post about it: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/
这个 webkit 错误有一个相当简单的解决方法，可以在伪类上进行转换。这是一篇关于它的很棒的博客文章：http: //xiel.de/webkit-fix-css-transitions-on-pseudo-elements/
Basically webkit doesnt support the transitions directly but you can apply the transition and style you want to change to its parent element. Then in the pseudo class you put the same style properties that you want to affect, but give them the value: inherit. That will cause them to inherit all of the parent elements values including the transition.
基本上，webkit 不直接支持过渡，但您可以将要更改的过渡和样式应用到其父元素。然后在伪类中放置您想要影响的相同样式属性，但给它们值：inherit。这将导致它们继承包括过渡在内的所有父元素值。
Here's a sample I did to animate the :after element, up and down
这是我为 :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;
}
*Update The bug has been fixed in Chrome Canary (as of February), but still appears to be broken in Safari. Can check the status and stay updated on it here: https://code.google.com/p/chromium/issues/detail?id=54699
*更新 该错误已在 Chrome Canary 中修复（截至 2 月），但在 Safari 中似乎仍被破坏。可以在此处查看状态并保持更新：https: //code.google.com/p/chromium/issues/detail?id=54699
