Question

我希望更改内容.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;
  }
}

Answer 1

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

引用W3C Spec :(强调是我的）

关键帧规则的关键帧声明块由属性和值组成。 这些规则中忽略了无法设置动画的属性 ，但'animation-timing-function'除外

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

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

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

1 个答案: