在以下内容中设置CSS转换属性的动画:在/之前伪类

Question

是否可以为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.

演示:http://jsfiddle.net/MxTvw/

Answer 1

谷歌浏览器将webkit错误修复添加到版本27.0.1453.110 m

此WebKit错误已修复:http://trac.webkit.org/changeset/138632

这是可能的动画假:before和:after,这里有一对夫妇为动画的伪元素的例子:before和:after.

以下是对上述示例的修改,其中包含一些编辑功能,可以在没有悬停模拟mouseleave/ mouseout延迟的情况下更加流畅地制作动画:

http://jsfiddle.net/MxTvw/234/

尝试在第二个伪类规则中添加#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;
}

需要注意的是前进的任何伪元素,如:before和:after应该使用双冒号语法::before和::after.此示例使用叠加background-color和background-image悬停模拟淡入淡出:

http://jsfiddle.net/MxTvw/233/

此示例模拟悬停时的旋转动画:

http://jsfiddle.net/Jm54S/28/

当然,我们可以使用::before和使用css3标准::after.

这适用于最新的Firefox,Chrome,Safari,Opera 18 +,IE10,IE11(IE9及以下版本不支持css3过渡或动画.)

Answer 2

你的小提琴在Firefox中对我有用.据我所知,如果这篇文章是最新的,这是唯一可以为伪元素设置动画的浏览器.

编辑:截至2016年,文章的链接被打破,相关的WebKit错误在4年前得到修复 .继续阅读以查看其他答案,这个已经过时了.