キーフレームがコンテンツ属性を変更するとFirefoxで機能しない

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プロパティのアニメーションが原因it is not an animatable propertyとアニメーション可能ではない任意のプロパティは無視されますW3C仕様のワーキングドラフトに従ってFirefoxで動作しません。

引用W3C Spec：（強調は私です）

キーフレームルールのキーフレーム宣言ブロックは、プロパティと値から成ります。 アニメーション化することができないプロパティが「アニメーション・タイミング機能」を除いて、これらのルールでを無視さ

上記抽出物は、Firefoxの動作が中の1つに対し、正しいことを暗示しますChromeはBoltClockがthis answerを指摘しているので、仕様のエディタのドラフトが更新されており、更新されたテキストはChromeの動作が正しいことを暗示しているようです。たぶんFirefoxはいつか動作を変えるかもしれないが、この仕様は成熟に達していないので時間がかかるかもしれない。

キーフレームルールのキーフレーム宣言ブロックは、プロパティと値で構成されています。この仕様で定義されてプロパティはアニメーションのタイミング機能を除いて、これらのルールに無視され