Question

我正在尝试使用类似于jsfiddle here的动画更改CSS伪：在元素内容之前。

#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"}
}

在Chrome中效果很好，只有Firefox和Firefox中的背景更改才有效。 Safari浏览器。

这是我应该接受的，因为这两种浏览器不能正常工作，还是有其他方法可以做到这一点？

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

Answer 1

content属性不符合CSS规范（CSS Spec）（MDN Reference）的动画，但无论出于何种原因，Chrome都允许这样做。

Chris Coyier的

CSS-Tricks Article

在我自己的测试中，动画内容仅适用于稳定的桌面Chrome（撰写本文时为第46版）。其他地方没有支持。桌面或iOS上没有Safari。没有Firefox。没有IE。这些浏览器中的每一个都将忽略动画，仅显示伪元素中的原始内容。

在遥远的未来，它可能是一个方便的技巧，或者它可能永远不会得到任何支持。非标准功能始终至少有被弃用的风险，因此Chrome支持可能不会永远持续下去。

Answer 2

可以使用包含多行的内容并剪切它来实现解决方法

（我正在使用现在过时的剪辑属性，但它可以很容易地适应剪辑路径）

#thing {
  position: absolute;
  width: 100px;
  height: 30px;
  background-color: rgba(80, 90, 200, 0.8)
}
#thing:before {
  content: "TEST1A\aTEST1B\aTEST2A";
  background-color: rgba(200, 200, 200, 0.8);
  animation: sideText 5s infinite;
  position: absolute;
  white-space: pre;
  line-height: 20px;
}
@keyframes sideText {
  0%, 33% {
    clip: rect(0px 120px 20px 0px);
    top: 0px;
  }
  33.01%,
  66% {
    clip: rect(20px 120px 40px 0px);
    top: -20px;
  }
  66.01%,
  100% {
    clip: rect(40px 120px 60px 0px);
    top: -40px;
  }
}

<div id="thing">

</div>

更改：在内容动画之前

2 个答案: