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

Google Chrome将webkit错误修复程序添加到版本27.0.1453.110 m

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

有可能为伪:before和:after设置动画，以下是为伪元素:before和{{1}制作动画的几个示例}。

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

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

尝试在第二个mouseout伪类规则中添加带有分组#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来模拟淡入淡出：

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

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

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

当然，随着css3标准的推进，我们可以使用background-image和::before。

适用于最新的Firefox，Chrome，Safari，Opera 18 +，IE10，IE11 （IE9及以下版本不支持css3过渡或动画。）

Answer 2

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

编辑：截至2016年，文章链接已损坏且relevant WebKit bug为fixed 4年前。继续阅读以查看其他答案，这个已经过时了。

Answer 3

现在它does not seem to work，但根据W3 specs，您可以将转换应用于伪元素。也许将来有一段时间......

Answer 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);
    }
  }

我有div .model-item，我需要动画他的：after。所以我添加了另一个更改背景的类，我将转换代码添加到main：after（在动画之前）

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

4 个答案: