css3 animation not working well on Firefox - css

Question

I am trying to upload the three blocks one by one and I want to make animation control the transform with the help of CSS3. Now what's happening is, it's working fine in google chrome (exactly the way I want) but it's not working fine in firefox. In firefox the three blocks are coming visible first and than the css3 animation starts working, which I don't want. I want the animation from the starting as its coming in google chrome.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.one {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: one 1s ease 1s;
-webkit-animation: one 1s ease 1s;
}
#keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.two {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 2s ease 2s;
-webkit-animation: two 2s ease 2s;
}
#keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.three {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 3s ease 3s;
-webkit-animation: two 3s ease 3s;
}
#keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<section class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</section>

Answer 1

There are several things you should change.
The first is that you should use a common class for all three since they're styled similarly and all having the same effect. I used a class called fadein (and also renamed the animation to this, though they don't need to match).
The second is that you can reuse the same animation for each, just use different animation-delays so that they're spaced out differently.
The third is that you need to have the initial state of all of them be scale(0) so that they don't show in FF. You can then use animation-direction:forwards to make sure they show after the animation as well.
Lastly, if you're going to use -webkit-keyframes, you should use -webkit-transform inside of that as well so that you get more browser support.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.fadein {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
transform:scale(0);
-webkit-transform:scale(0);
animation: fadein 1s ease 1s forwards;
-webkit-animation: fadein 1s ease 1s forwards;
}
#keyframes fadein {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes fadein {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
.two {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.three {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
<section class="wrapper">
<div class="fadein one"></div>
<div class="fadein two"></div>
<div class="fadein three"></div>
</section>