在伪类的:after/:before之内对CSS过渡属性进行动画处理 [英] Animate the CSS transition property within :after/:before pseudo-classes

问题描述

是否可以为CSS伪类设置动画?

Is it possible to animate CSS pseudo-classes?

说我有

#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支持.

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.

我已经有一个JavaScript方法，所以请不要使用JavaScript替代方法.

I already have a JavaScript method, so please no JavaScript alternatives.

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

推荐答案

您的小提琴确实在Firefox中对我有用.据我所知，是否本文是最新的，这是唯一可以制作伪元素动画的浏览器.

Your fiddle does work for me in Firefox. And as far as I know, and if this article is up to date this is the only browser that can animate pseudo-elements.

编辑:自2016年起，文章链接已断开，并且已修复 4年前 >.请继续阅读以查看其他答案，此答案已过时.

EDIT: As of 2016, the link to article is broken and the relevant WebKit bug was fixed 4 years ago. Read on to see other answers, this one is obsolete.

这篇关于在伪类的:after/:before之内对CSS过渡属性进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！