Cssの変更がmozillaで機能しない

：の後に次のコードを使用し、その内容をクロームでうまく処理していますが、firefox 26.0では動作しません。どうして？Cssの変更がmozillaで機能しない

どこが間違っていましたか？私はそれを理解できませんでしたか？ contentプロパティがアニメーション可能となるものではありません

<html> 
<head> 

<style type="text/css"> 
.teacherheading { 
display: inline-block; 
font-size:20px; 
} 

.teacherheading::after{content:'educational'; 

animation: 8s ease-out 2s pulsate; 
animation-iteration-count: infinite; 

-webkit-animation: 8s ease-out 2s pulsate; 
-webkit-animation-iteration-count: infinite; 

-moz-animation: 8s ease-out 2s pulsate; 
-moz-animation-iteration-count: infinite; 

-o-animation: 8s ease-out 2s pulsate; 
-o-animation-iteration-count: infinite; 

} 


@-keyframes pulsate { 
    0% {content:'educational';} 
    25% {content:'testprep';} 
    50% {content:'tutoring';} 
    75% {content:'training';} 
    100% {content:'educational';} 
} 
@-webkit-keyframes pulsate { 
    0% {content:'educational';} 
    25% {content:'testprep';} 
    50% {content:'tutoring';} 
    75% {content:'training';} 
    100% {content:'educational';} 
} 

@-moz-keyframes pulsate { 
    0% {content:'educational';} 
    25% {content:'testprep';} 
    50% {content:'tutoring';} 
    75% {content:'training';} 
    100% {content:'educational';} 
} 

@-o-keyframes pulsate { 
    0% {content:'educational';} 
    25% {content:'testprep';} 
    50% {content:'tutoring';} 
    75% {content:'training';} 
    100% {content:'educational';} 
} 

</style> 

<body> 
<div style="font-size:20px"> 
Start your <div class="teacherheading"></div> institution 
</div> 
</body> 
</html>

出典

2016-04-20 Kushal Jain

js fiddleを作成できますか？ – Giri

私を助けます。

Chromeはこれを許可しているようです（理由はわかりません）が、Firefoxはやや厳しくなっています。

基本的にFFは意図した動作に従っていますが、Chromeは動作していません。私自身のテストアニメーションコンテンツでCSS-Tricks

でクリスCoyierから

Content @ MDN

だけで安定したデスクトップクローム（執筆時点でV46）で働いています。他の場所ではサポートがありません。デスクトップやiOSではSafariがありません。 Firefoxはありません。 IEなし。これらのブラウザはそれぞれ、アニメーションを無視して、擬似要素の元のコンテンツのみを表示します。

遠く離れた将来には便利なテクニックかもしれませんし、何かによって決してサポートされないかもしれません。標準でない機能は、少なくとも一部は推奨されなくなる可能性があるため、このChromeのサポートは永遠に続くわけではありません。

あなたはクロスブラウザに優しい方法

JavaScriptを使用してコンテンツを変更する必要がある場合。

出典

2016-04-20 09:33:53

Cssの変更がmozillaで機能しない

答えて

関連する問題