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

我想更改class

中的内容。glyphicon音量降低：在
之前（引导中的class图标），但只能在Google Chrome上使用

我的关键帧不会更改
内容
属性，但会更改颜色

我不知道我错过了什么？我不想使用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;
  }
}

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

引用：（重点是我的）

关键帧规则的关键帧声明块由属性和值组成在这些规则中，将忽略无法设置动画的属性，但“动画计时功能”除外

上面的摘录暗示Firefox中的行为是正确的，而Chrome中的行为不是正确的，但正如BoltClock在中指出的，规范的编辑草稿已经更新，更新的文本似乎暗示Chrome的行为是正确的。也许Firefox有一天会改变这个行为，但是由于这个规范还没有成熟，这可能需要时间

关键帧规则的关键帧声明块由属性和值组成本规范定义的属性在这些规则中被忽略，动画计时功能除外