Css 更改：在使用动画内容之前

我试图用类似于的动画更改CSS伪：before元素内容

在Chrome中效果很好，仅在Firefox和Safari中进行背景更改

这是我应该接受的在这两个浏览器中不工作的东西，还是有其他方法可以做到这一点

---

我也尝试过不同的供应商前缀，但都没有成功。

根据CSS规范（）（），

内容属性不可设置动画，但无论出于何种原因，Chrome允许这样做

克里斯·科伊尔

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

在遥远的将来，这可能是一个方便的技巧，也可能永远不会得到任何支持。非标准功能总是至少有被弃用的风险，所以这种Chrome支持可能不会永远持续下去

解决方法是使用包含多行的内容并对其进行剪裁

（我使用的是现已过时的“剪辑”属性，但它可以轻松地调整为剪辑路径）


#东西{
位置：绝对位置；
宽度：100px；
高度：30px；
背景色：rgba（80、90、200、0.8）
}
#事情：以前{
内容：“TEST1A\aTEST1B\aTEST2A”；
背景色：rgba（2002002000.8）；
动画：侧文本5s无限；
位置：绝对位置；
空白：预处理；
线高：20px；
}
@关键帧侧文本{
0%, 33% {
剪辑：矩形（0px 120px 20px 0px）；
顶部：0px；
}
33.01%,
66% {
剪辑：矩形（20px 120px 40px 0px）；
顶部：-20px；
}
66.01%,
100% {
剪辑：矩形（40px 120px 60px 0px）；
顶部：-40px；
}
}
据我所知，它只能在chrome中工作。
#thing:before
{
  content:"TEST00";
  background-color:rgba(200,200,200,0.8);
  animation:sideText 30s ease-in-out infinite;
}

@keyframes sideText
{
  0% {content:"TEST1A";background-color:rgba(180,90,200,0.8)}
  30%{content:"TEST1B"}
  32%{content:"TEST2A";background-color:rgba(80,190,200,0.8)}
  60%{content:"TEST2B"}
  62%{content:"TEST3A";background-color:rgba(80,90,20,0.8)}
  98%{content:"TEST3B"}
  100%{content:"TEST1C"}
}