Keyframes ändern Inhalt Attribut funktioniert nicht unter Firefox

Question

Ich möchte Inhalte in der Klasse .glyphicon-volume-down:before (Klassensymbol in Bootstrap) ändern, sondern nur auf Google Chrome arbeiten.

Meine Keyframes ändern das Attribut content nicht, aber es ändert die Farbe.

Ich weiß nicht, was ich vermisse? Ich möchte kein JavaScript verwenden.

Hier ist mein Code:

.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

Die Animation von content Eigenschaft nicht, weil it is not an animatable property in Firefox funktioniert und gemäß dem Arbeitsentwurf der W3C-Spezifikationen einer Eigenschaft, die nicht animierbar ist, wird ignoriert.

unter Angabe der W3C Spec: (Betonung liegt Mine)

Der Block Keyframe Deklaration für einen Keyframe Regel besteht aus Eigenschaften und Werte. Eigenschaften, die animiert wird nicht in der Lage sind, werden in diesen Regeln, mit Ausnahme von ‚Animation-timing-Funktion‘

Der obige Extrakt würde bedeuten, dass das Verhalten in Firefox korrekt ist, während die man ignorieren in Chrome ist nicht, aber wie BoltClock in this answer hervorhebt, wurde der Entwurf des Editors der Spezifikation aktualisiert und der aktualisierte Text scheint zu implizieren, dass das Verhalten von Chrome das richtige ist. Vielleicht wird Firefox das Verhalten eines Tages ändern, aber da diese Spezifikation noch nicht ausgereift ist, kann es einige Zeit dauern.

Der Keyframe-Deklarationsblock für eine Keyframe-Regel besteht aus Eigenschaften und Werten. Die Eigenschaften dieser Spezifikation definiert sind, in diesen Regeln ignoriert, mit Ausnahme der Animation-timing-Funktion