是否可能对 CSS 伪类进行动画效果？
比如我有这样的代码：
#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;
}
这个有可能吗？我一直在测试，但迄今为止似乎找不到解决方案。 我正在尝试通过使用Modernizr减少所需的JavaScript支持。
我已经有一个JavaScript方法了，所以请不要提供JavaScript替代方案。
谷歌Chrome在版本27.0.1453.110 m中加入了WebKit的错误修复。
这个WebKit的错误已经被修复：http://trac.webkit.org/changeset/138632
可以对伪元素:before和:after进行动画处理，以下是关于动画处理:before和:after的一些示例。
在你上面的示例上进行修改后，对其进行编辑，使其在悬停时不需要模拟的mouseleave/mouseout延迟更平滑地进出：
http://jsfiddle.net/MxTvw/234/
尝试在第二个:hover伪类规则中添加主选择器#foo和分组: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;
}
请注意，从现在开始，任何伪元素如 :before 和 :after 都应该使用双冒号语法 ::before 和 ::after。本示例利用悬停时的覆盖 background-color 和 background-image 模拟淡入淡出效果：
http://jsfiddle.net/MxTvw/233/
本示例模拟了一个旋转动画的效果：
当然，如果遵循 CSS3 标准，我们可以使用 ::before 和 ::after。
此方法适用于最新版的 Firefox、Chrome、Safari、Opera 18+、IE10 和 IE11（IE9 及以下版本不支持 CSS3 transitions 或 animate）。
-ms-transition 前缀在任何稳定版本的 IE 中都未被使用，应将其删除（一开始没有出现是有原因的）。未加前缀的声明应放在最后。 - BoltClock在Firefox中，您的fiddle对我有效。据我所知，并且如果这篇文章是最新的，则这是唯一可以动画化伪元素的浏览器。
编辑：截至2016年，文章链接已损坏，相关的WebKit bug 已4年前被修复。请继续阅读其他答案，此答案已过时。
我刚刚发现你可以为 :after 和 :before 添加动画效果 (:
代码示例-
.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);
}
}
::after元素做什么？ - Ry-