Css3 Firefox Issues

[mbrown]

I am attempting to get this demo to work in FF. The author has stated his code only works in Chrome. I have added the necessary -moz- calls for the CSS3 vendor specific calls. It still does not work in FF. The text is not supposed to be load all at once. It is supposed to load a little at a time.

 

CSS

@font-face {
font-family: 'Qlassik';
src: url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.eot');
src: local('?'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.woff') format('woff'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.ttf') format('truetype'), url('http://bmcenterprises.wdfiles.com/local--files/fonts/Qlassik_TB-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}


html {
height: 100%;
width: 100%;
}
html {
background-color: #fff;
background-image: linear-gradient(top, #fff, #e4e4e4);
}



#content {
display: block;
position: absolute;
top: 50%;
width: 98%;
padding: 0;
margin-top: -200px;
text-align: center;
height: 400px;
}


.fade-in {
font: normal 40px/2 'Qlassik';
color: #333;
}


.one {font-size: 50px;}
.five {font-size: 30px;}


@-moz-keyframes reset {
0% {
opacity: 0;
}
100% {
opacity: 0;
}
}


@keyframes reset {
0% {
opacity: 0;
}
100% {
opacity: 0;
}
}


@-moz-keyframes fade-in {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
100% {
opacity: 1;
}
}


@keyframes fade-in {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
100% {
opacity: 1;
}
}


.fade-in {
-moz-animation-name: reset, fade-in;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
animation-name: reset, fade-in;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
}


.fade-in.one {
-moz-animation-delay: 0, 0;
animation-delay: 0, 0;
}


.fade-in.two {
-moz-animation-delay: 0, 1s;
animation-delay: 0, 1s;
}


.fade-in.three {
-moz-animation-delay: 0, 1.5s;
animation-delay: 0, 1s;
}


.fade-in.four {
-moz-animation-delay: 0, 2s;
animation-delay: 0, 2s;
}


.fade-in.five {
-moz-animation-delay: 0, 3s;
animation-delay: 0, 3s;}


a.again {
background-color: #6bd3ee;
background-image: linear-gradient(top, #6bd3ee, #2c9bd4);
font-size: 20px;
font-weight: normal;
padding: 5px 18px;
border-radius: 20px;
border-top: 1px solid #baebfc;
box-shadow: 1px 1px 0 #1c92b0, 0 2px 2px rgba(0,0,0,0.4);
color: #fff;
text-shadow: #257ca7 0 1px 1px;
background-clip: padding-box;
-webkit-background-clip: padding-box;
text-decoration: none;
font-family: 'Qlassik';
margin: 40px 10px 0;
display: inline-block;
-moz-animation-name: reset, fade-in;
-moz-animation-duration: 6s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay:0, 6s;
animation-name: reset, fade-in;
animation-duration: 6s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-delay:0, 6s;
}
a.again:hover {
background-color: #6ad9fa;
background-image: linear-gradient(top, #6ad9fa), #39b0ed);
color: #fff;
text-decoration: none;
}
a.again:active {
background-color: #22b4d9;
background-image: none;
}
a.again.red {
background-color: #b02b34;
background-image: linear-gradient(top, #ee3c42), #b02b34);
border-top: 1px solid #f1554a;
box-shadow: 1px 1px 0 #bc2f38, 0 2px 2px rgba(0,0,0,0.4);
text-shadow: #98262d 0 1px 1px;
}
a.again.red:hover {
background-color: #ff434f;
background-image: linear-gradient(top, #ff434f), #cb333a);
}
a.again.red:active {
background-color: #ba313a;
background-image: none;
}
a.again:before {
content: '\2190 ';
font-weight: bold;
}
a.again.red:before {
content: '';
}

 

 

HTML

<div id="content">

<p>
<span class="fade-in one">Tomorrow will be just another day.</span>
</p>

<p>
<span class="fade-in two">That you will</span> <span class="fade-in three"> never</span> <span class="fade-in four"> forget.</span>
</p>

<p>
<span class="fade-in five">See you at 10am.</span>
</p>

<p>
<a href="/blog:animated-page-entry-with-css3" class="again">back to the BMC Blog</a> <a href="/local--code/blog:animated-page-entry-with-css3/5" class="again red">see it again</a>
</p>

</div>

[kjetterman]

Does it work in Chrome? If so... do you have a URL I can take a look at so that I can see how it is supposed to work?

[mbrown]

Yes it is. mikeabrown.no-ip.org/fade.html

[Frank P]

Yes it is. mikeabrown.no-ip.org/fade.html

That gives a 404.