动画css：after / before pseudo？ [英] Animate a css :after/before pseudo?

问题描述

是否可以为伪动画设置动画？

Is it possible to animate the pseudo?

说我有：

#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 can't seem to find a solution and I'm trying to trim down the amount of Javascript support I need by using Modernizr.

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

I already have a JS Method, so please no JS 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.

/ strong>：自2016年起，文章链接已断开，相关的WebKit错误 a>是固定的 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.

这篇关于动画css：after / before pseudo？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！