动画 `content` 属性

您知道可以动画化伪元素的 content 属性吗？根据规范中 可动画属性列表，您不应该能够做到这一点，但在最新版本的桌面 Chrome 中可以。下面的演示应该通过更改 @keyframes 动画内的 content 属性，将“A”动画化为“B”。

代码

要制作如上所示的字母切换演示，我们创建一个空的 <div>，我们将用其伪元素的 content 填充它，如下所示

<div class="letter-changer"></div>

然后，我们设置其伪元素的 content 以像任何其他 CSS 属性一样更改，方法是创建一个新的 @keyframes 动画并使用 animation 属性进行设置。

@keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

.letter-changer::after {
  animation: changeLetter 3s linear infinite alternate;
}

这有用吗？

它在大多数浏览器中都不起作用，而且是非标准的，这使得使用它存在一定的风险。但是，确实存在铺设小路的事情（即，如果它显然有用，它 *可能* 会被标准化）。

在 上周的一篇文章中，我描述了一种在加载栏内递增数字的方法。它使用这个概念来递增数字。这是另一个类似的例子：倒计时！

浏览器支持

在我自己的测试中，动画 content *仅* 在稳定的桌面 Chrome（撰写本文时为 v46）中有效。其他地方都不支持。桌面或 iOS 上的 Safari 不支持。Firefox 不支持。IE 不支持。这些浏览器中的每一个都会忽略动画，仅在伪元素中显示原始 content。

它可能在遥远的将来成为一个方便的技巧 *或* 它可能永远不会被任何东西支持。非标准功能始终至少存在被弃用的风险，因此 Chrome 的支持可能不会永远持续下去。

2017 年 9 月再次查看浏览器的支持情况：Chrome/移动版、Firefox 和 Opera 中均有效，但在 IE、Edge 或 iOS 中无效。

2020 年 10 月再次查看浏览器的支持情况：Edge 采用了 Chrome，因此问题已解决。IE 支持越来越少。iOS 仍然不支持。

如果您需要以跨浏览器兼容的方式更改内容

使用 JavaScript。