在 :after/:before 伪类中对 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

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

---

编辑：截至 2016 年，文章链接已损坏，相关的 WebKit 错误已修复 4 年以前。继续阅读以查看其他答案，这个答案已过时。

Answer 2

Google 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/

尝试添加主选择器#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 和 < code>:after 应使用双冒号语法 ::before 和 ::after。此示例使用悬停时的覆盖 background-color 和 background-image 模拟淡入和淡出：

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

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

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

当然，随着 css3 标准的发展，我们可以使用 <代码>::之前和<代码>::之后。

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

Answer 3

它现在似乎不起作用，但是根据W3 规范 您可以将过渡应用于伪元素。也许在未来的某个时候……

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 （动画之前）