Firefoxフォントのアニメーションの問題

Question

2つの質問

私はCodepenでかなりクールなフォントアニメーションを見つけましたが、そのリンクを失いました。私は過去1時間オンラインでそれを探していましたが運がなかったのです！

しかし、とにかく、このコードに問題があります。 Firefoxは私が望む結果を私に与えません。私はコードのほとんどに-moz-を追加しようとしましたが、私が以下に示す画像のように同じ背景画像が表示されます。

これはFirefoxでは不可能ですか？

私の2番目の質問です：私はあなたがボタンの上に置くと効果フェードインの種類でテキストを変更するフォントを望んでいました。私はそれを管理しましたが、ホバーテキスト上のアニメーションは動きません。私はdivに2つのアニメーションが添付されているため、これは推測しています。これを回避する方法はありますか？

これらの問題を解決するにはどうすればよいですか？御時間ありがとうございます。

.font{ 
 
position:fixed; 
 
width: 100%; 
 
left: 5%; 
 
top: 5%; 
 
} 
 
.font:before{ 
 
position:absolute; 
 
content:"TEST"; 
 
top: -10px; 
 
    \t font: 700 5em/1 "Orbitron", sans-serif; 
 
    \t letter-spacing: 0; 
 
    \t padding:.25em 0.325em; 
 
display: block; 
 
margin: 0 auto; 
 
    \t text-shadow: 0 0 80px rgba (255,255,255,.5); 
 
background: url(https://media.24ways.org/2008/02/pattern-howto01.gif) repeat-y; 
 
-moz-background-clip: text; 
 
-moz-text-fill-color: transparent; 
 
-moz-animation: aitf 10s linear infinite; 
 
-moz-transform: translate3d(0,0,0); 
 
-moz-backface-visibility: hidden; 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
-webkit-animation: aitf 10s linear infinite; 
 
-webkit-transform: translate3d(0,0,0); 
 
-webkit-backface-visibility: hidden; 
 
} 
 
@keyframes aitf { 
 
0% { background-position: 0% 50%; } 
 
100% { background-position: 100% 50%; } \t 
 
} 
 
@-webkit-keyframes aitf { 
 
0% { background-position: 0% 50%; } 
 
100% { background-position: 100% 50%; } 
 
} 
 
@-moz-keyframes aitf { 
 
0% { background-position: 0% 50%; } 
 
100% { background-position: 100% 50%; } 
 
} 
 
.icon { 
 
position: relative; 
 
width: 50px; 
 
height: 50px; \t 
 
top: 150px; 
 
border-radius: 50%; 
 
border: solid 5px black; 
 
cursor: pointer; 
 
font-size: 30px; 
 
text-align: center; 
 
vertical-align: middle; 
 
line-height: 50px; 
 
margin: 0 0.8%; 
 
background: #730A0C; 
 
} 
 
.icon:hover ~ .font:before{ 
 
content:"TEST2"; 
 
animation: fadein 2s; 
 
-moz-animation: fadein 2s; 
 
-webkit-animation: fadein 2s; 
 
-o-animation: fadein 2s; 
 
background-position: center; 
 
} 
 
/*Fade Inn Animation*/ 
 
@keyframes fadein { 
 
from { 
 
    opacity:0; 
 
} 
 
to { 
 
    opacity:1; 
 
} 
 
} 
 
@-moz-keyframes fadein { /* Firefox */ 
 
from { 
 
    opacity:0; 
 
} 
 
to { 
 
    opacity:1; 
 
} 
 
} 
 
@-webkit-keyframes fadein { /* Safari and Chrome */ 
 
from { 
 
    opacity:0; 
 
} 
 
to { 
 
    opacity:1; 
 
} 
 
} 
 
@-o-keyframes fadein { /* Opera */ 
 
from { 
 
    opacity:0; 
 
} 
 
to { 
 
    opacity: 1; 
 
} 
 
} 
 
/*Fade Inn Animation*/

<div class="icon"> </div> 
 
<div class="font"> </div>

Answer 1

Firefox 48このプロパティをサポートする唯一たブラウザが今クローム、サファリ、オペラは-webkit-接頭辞を使用している2016年の8月に出てくるまでtext-fill-colorプロパティは、Firefoxで使用できません。 。