2016-04-20 38 views
0

Ich baue einen Übergang mit : nach css und Inhalt in es mit unter Code und es funktioniert gut auf Chrom, aber nicht auf Firefox 26.0 arbeiten. Warum ?Css Übergang funktioniert nicht auf Mozilla

Wo habe ich falsch gemacht? Ich konnte es nicht verstehen? Helfen Sie mir

<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> 
+0

Könnten Sie js fiddle erstellen? – Giri

Antwort

0

Die content Eigenschaft ist nicht als animierbaren gemeint.

Chrome scheint dies zu erlauben (ich weiß nicht warum), aber Firefox ist etwas strenger.

Grundsätzlich folgt FF dem beabsichtigten Verhalten, Chrome nicht.

Content @ MDN

Von Chris Coyier bei CSS-Tricks

In meinem eigenen Test belebenden Inhalt gearbeitet hat, nur in einem stabilen Desktop-Chrome (v46 zum Zeitpunkt des Schreibens). Keine Unterstützung woanders. Keine Safari auf dem Desktop oder iOS. Kein Firefox. Kein IE. Jeder dieser Browser ignoriert die Animation und zeigt nur den ursprünglichen Inhalt im Pseudo-Element an.

Es könnte ein handlicher Trick in einer fernen Zukunft sein oder es könnte niemals von irgendetwas unterstützt werden. Nicht standardmäßige Funktionen laufen immer Gefahr, als veraltet eingestuft zu werden. Daher kann diese Chrome-Unterstützung nicht ewig dauern.

Wenn Sie Inhalte in einer Cross-Browser-freundliche Art und Weise

verwendet JavaScript ändern.

Verwandte Themen