css - 关键帧更改内容属性在 Firefox 上不起作用

Question

我想更改类 .glyphicon-volume-down:before 中的内容( Bootstrap 中的类图标)，但仅适用于 Google Chrome。

我的关键帧没有改变 content 属性，但它改变了颜色。

我不知道我错过了什么？我不想使用 JavaScript。

这是我的代码:

.glyphicon-volume-down:before{
  /*name keyframes is w-spin*/
  animation-name:w-volume;

  /*time animation done is 2s*/
  animation-duration: 2s;

  /*delay time when start animation is 0s*/
  animation-delay: 0s;

  /*loop animation forever*/
  animation-iteration-count:infinite;

  /*effect animation run with the same speed from start to end*/
  animation-timing-function:linear;

  /*default pause animation*/
  /*animation-play-state:paused;*/

  /*repeat*/
  animation-direction: alternate;

  -webkit-animation-name: w-volume;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  /*-webkit-animation-play-state:paused;*/
  -webkit-animation-direction: alternate;
}


@-webkit-keyframes w-volume {
  0% {
    content:"text1";
    color:yellow;
  }
  100% {
    content:"text2";
    color: red;
  }
}

@keyframes w-volume {
  0% {
    content:"text1";
    color:yellow;
  }
  100% {
    content:"text2";
    color: red;
  }
}

Answer 1

content 属性的动画在 Firefox 中不起作用，因为 it is not an animatable property根据 W3C 规范的工作草案，任何不可设置动画的属性都将被忽略。

引用W3C Spec : (重点是我的)

The keyframe declaration block for a keyframe rule consists of properties and values. Properties that are unable to be animated are ignored in these rules, with the exception of ‘animation-timing-function’

上面的摘录暗示 Firefox 中的行为是正确的，而 Chrome 中的行为是错误的，但正如 BoltClock 在 this answer 中指出的那样，规范的编辑草案已经更新，更新后的文本似乎暗示 Chrome 的行为是正确的。也许 Firefox 有一天会改变行为，但由于该规范尚未成熟，可能需要时间。

The keyframe declaration block for a keyframe rule consists of properties and values. The properties defined by this specification are ignored in these rules, with the exception of animation-timing-function