CSS 生成的内容上的过渡和动画

生成的内容是指通过::before 和 ::after 添加到页面上的伪元素。在当前浏览器环境中，对这些元素应用过渡或动画的支持情况并不理想。我认为这是一个巨大的遗憾，所以我只是将这篇文章作为我的永久记录，以跟踪这方面的进展。

此表中的数据来自 此测试用例。

	3.6 及以下	不支持
	4.0 及以上	支持
	6.0.5 及以下	不支持 – 错误报告
	6.1 及以上	支持
	25 及以下	不支持
	26 及以上	支持 – 2013年1月3日修复
	12.16 及以下	不支持 – 无法 进入这里，但 Divya Manian 确认错误报告存在，并且是 BTS 编号 CORE-29141。
	15 及以上	支持 – Blink 转换后
	9 及以下	不支持
	10 及以上	支持 – 带有一个奇怪的警告 此处说明。

在移动设备上，iOS 6.1 及以下版本的 Safari 上不起作用，但在 iOS 7 上的 Safari 上可以。

为什么这很重要？

伪元素 非常有用。它们帮助我们在设计过程中完成一些花哨的事情，同时保持标记的整洁。伪元素最有用的一些额外设计元素与过渡和动画一样有用。它们之间有很多重叠。在撰写本文时，此网站的设计在页脚中使用了动画伪元素。底部的盒子行有徽标，这些徽标会滑入（或者应该滑入，如果普遍支持的话）。

浏览器没有理由不支持这一点。我理解所有关于优先级的事情，所以我不会抱怨或责怪浏览器还没有做到这一点，但我希望这篇文章能帮助大家稍微关注一下这个问题。