Firefox Font Animation Issue

Question

Two questions:

I found a pretty cool font animation on Codepen, but lost the link for it. I have been looking for it online for the past hour and with no luck!

But anyways, there is a issue with this code. Firefox won't give me the results I want. I have tried adding -moz- to most of the code, but the same background image appears like in the picture I have below.

Is this just not possible with Firefox?

example

My second question is: I wanted the font to change text with a kind of fade in effect when you hover over a button. I managed that but the animation on the hover text does not move. I am guessing this is because there are two animations attached to the div; is there a way around this?

How can I fix these issues? Thanks for your time.

.font{
position:fixed;
width: 100%;
left: 5%;
top: 5%;
}
.font:before{
position:absolute;
content:"TEST";
top: -10px;
  font: 700 5em/1 "Orbitron", sans-serif;
  letter-spacing: 0;
  padding:.25em 0.325em;
display: block;
margin: 0 auto;
  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%; } 
}
@-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; 
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>

score 1 · Accepted Answer · answered Jul 14 '16 at 14:59

1

The text-fill-color property is not available in Firefox until Firefox 48 comes out in August of 2016. The only browers that support this property right now are Chrome, Safari, and Opera using the -webkit- prefix.

answered Jul 14 '16 at 14:59

Hunter Turner

6,804
11
41
56

Thank you for the reply, that sucks quite a lot. Also how could I go about it so the text-fill-color is not added with Firefox? – Jul 14 '16 at 15:07
You'll probably have to use a JavaScript function to determine if the browser is in Firefox. If it is, then add a specific class or whatever you want to the element. – Hunter Turner Jul 14 '16 at 15:12
Or if you don't want to use JavaScript, you can do something like this: http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css – Hunter Turner Jul 14 '16 at 15:13

Firefox Font Animation Issue

1 Answers1