Firefox字體動畫問題

Question

兩個問題：

我在Codepen上發現了一個非常酷的字體動畫，但是失去了它的鏈接。我一直在網上尋找它的過去一小時，沒有運氣！

但無論如何，這個代碼有問題。 Firefox不會給我我想要的結果。我曾嘗試將-moz-添加到大部分代碼中，但是同樣的背景圖像顯示在下面的圖片中。

這只是不可能與Firefox？

我的第二個問題是：我想要的字體，當你將鼠標懸停在一個按鈕，更改文本以一種有效褪色。我管理，但懸停文字上的動畫不會移動。我猜這是因爲有兩個動畫附加到div;有沒有解決的辦法？

我該如何解決這些問題？謝謝你的時間。

.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

的text-fill-color屬性是不能在Firefox可用，直到Firefox 48出來，在2016年八月，現在支持此屬性唯一的browers稱爲Chrome，Safari和Opera使用-webkit-前綴。