在 :after/:before 伪类中为 CSS 过渡属性设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7809872/
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
Animate the CSS transition property within :after/:before pseudo-classes
提问by daryl
Is it possible to animate CSS pseudo-classes?
是否可以为 CSS 伪类设置动画？
Say I have:
说我有：
#foo:after {
content: '';
width: 200px;
height: 200px;
background: red;
display: block;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
#foo:hover:after {
width: 250px;
height: 250px;
}
Is this even possible? I've been testing and so far I can't seem to find a solution. I'm trying to trim down the amount of JavaScript support I need by using Modernizr.
这甚至可能吗？我一直在测试，到目前为止我似乎找不到解决方案。我正在尝试通过使用 Modernizr 来减少我需要的 JavaScript 支持量。
I already have a JavaScript method, so please no JavaScript alternatives.
我已经有了一个 JavaScript 方法，所以请不要使用 JavaScript 替代品。
采纳答案by Litek
Your fiddle does work for me in Firefox. And as far as I know, and if this articleis up to date this is the only browser that can animate pseudo-elements.
你的小提琴在 Firefox 中对我有用。据我所知，如果这篇文章是最新的，这是唯一可以为伪元素设置动画的浏览器。
EDIT: As of 2016, the link to article is broken and the relevant WebKit bugwas fixed4 years ago. Read on to see other answers, this one is obsolete.
编辑：截至 2016 年，文章链接已损坏，相关的 WebKit 错误已在4 年前修复。继续阅读以查看其他答案，这个已经过时了。
回答by Jonathan Marzullo
Google Chrome added the webkit bug fix to Version 27.0.1453.110 m
谷歌浏览器在版本 27.0.1453.110 m 中添加了 webkit 错误修复
This WebKit bug was fixed: http://trac.webkit.org/changeset/138632
此 WebKit 错误已修复：http: //trac.webkit.org/changeset/138632
IT IS POSSIBLEto animate pseudo :beforeand :after, here are a couple of examples for animating the psuedo-elements :beforeand :after.
这是可能的动画假:before和:after，这里有一对夫妇为动画的伪元素的例子:before和:after。
Here is a modification of your example above with some edits, that make it animate in and out more smoothly without the simulated mouseleave/ mouseoutdelay on hover:
这是对上面示例的修改，并进行了一些编辑，使其在没有模拟mouseleave/mouseout悬停延迟的情况下更流畅地进出动画：
http://jsfiddle.net/MxTvw/234/
http://jsfiddle.net/MxTvw/234/
Try adding the main selector #foowith the grouped :hoverpseudo-class in your second :hoverpseudo-class rule. Also add the transitionproperty, and not just the vendor specific prefixed properties for transition:
尝试在第二个伪类规则中添加#foo带有分组:hover伪类的主选择器:hover。还要添加transition属性，而不仅仅是供应商特定的前缀属性transition：
#foo:after{
display: block;
content: '';
width: 200px;
height: 200px;
background: red;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#foo,
#foo:hover:after,
#foo:hover:before{
width: 250px;
height: 250px;
}
Note that going forward any Pseudo Elements like :beforeand :aftershould use the double colon syntax ::beforeand ::after. This example simulates a fade in and out using a overlay background-colorand a background-imageon hover:
请注意，向前推进任何伪元素，例如:before并且:after应该使用双冒号语法::before和::after. 此示例使用叠加background-color和background-image悬停来模拟淡入和淡出：
http://jsfiddle.net/MxTvw/233/
http://jsfiddle.net/MxTvw/233/
This example simulates a animate of rotation on hover:
此示例模拟悬停时的旋转动画：
Of course moving forward with css3 standards we could use ::beforeand ::after.
当然，继续使用 css3 标准，我们可以使用::before和::after。
This works in latest Firefox, Chrome, Safari, Opera 18+, IE10, IE11(IE9 and below do not support css3 transitions or animate.)
这适用于最新的 Firefox、Chrome、Safari、Opera 18+、IE10、IE11（IE9 及以下不支持 css3 过渡或动画。）
回答by Lapple
It does not seem to worknow, however according to the W3 specsyou can apply transitions to pseudo-elements. Maybe some time in future…
回答by Netanel Perez
I just found out that you can animate :after and :before (:
我刚刚发现你可以动画 :after 和 :before (:
Code example-
代码示例-
.model-item {
position: relative;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: transparent;
transition: all .3s;
}
}
.opc {
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: rgba(0, 51, 92, .75);
}
}
I have the div .model-item and i needed to animate his :after. So i've added another class which changes background and i added the transition code to the main :after (before animation)
我有 div .model-item，我需要为他的 :after 设置动画。所以我添加了另一个改变背景的类，我将转换代码添加到主 :after （动画之前）
