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

【问题标题】：Keyframes change content attribute not work on Firefox关键帧更改内容属性在 Firefox 上不起作用
【发布时间】：2016-04-24 20:32:47
【问题描述】：

我想更改 .glyphicon-volume-down:before 类中的内容（引导程序中的类图标），但仅适用于 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;
  }
}

【问题讨论】：

标签： css animation twitter-bootstrap-3 css-animations

【解决方案1】：

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

引用W3C Spec：（重点是我的）

关键帧规则的关键帧声明块由属性和值组成。 这些规则会忽略无法动画化的属性，但“animation-timing-function”除外

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

关键帧规则的关键帧声明块由属性和值组成。 本规范定义的属性在这些规则中被忽略，但animation-timing-function除外

【讨论】：