带有 :before 和 :after 伪元素的 CSS 过渡

Posted 2023-03-06

【中文标题】带有 :before 和 :after 伪元素的 CSS 过渡

【英文标题】：CSS Transitions with :before and :after pseudo elements

【发布时间】：2012-04-05 13:57:39

【问题描述】：

似乎无法使用 -webkit-transition 为伪元素设置动画。下面的小提琴显示了我在 Chrome/Safari 中运行时的意思，我猜现在不支持？

http://jsfiddle.net/4rnsx/130/

【参考方案1】：

Nope, not supported yet

【参考方案2】：

于 2013 年 1 月 3 日在 Google Chrome 中修复。

到目前为止（我确实更新了这个列表）它支持：

FireFox 4.0 及更高版本 Chrome 26 及更高版本 IE 10 及以上版本

等待 Safari 和 android 版 Chrome 提取这些更新。

您可以test it yourself in your browser，或

请参阅browser support table。

【讨论】：

它实际上并没有固定在生产上，只固定在开发上。意味着您仍然无法在 Chrome 中执行此操作。

【参考方案3】：

嗯，实际上，你可以。

您只需要利用经常被遗忘的inherit 值。 不幸的是，我们（还）不能直接使用自定义动画来定位伪元素，但我们肯定可以通过继承我们希望动画的属性让它们共享“父”元素的相同动画。

看我的小提琴here。

【讨论】：

这是这个问题最被低估的答案。