Firefox Font Animation Issue

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 года Единственные Браузеры, поддерживающие эту недвижимость прямо сейчас Chrome, Safari и Opera, используя префикс -webkit- ,