CSS3 opacity not working in Safari, Chrome and ie - css

Question

I can preview in firefox only.
Please help me.
Link to Fiddle
HTML
<div id="yamaha">
<div class="bg1"></div>
<div class="pic1"></div>
</div>
CSS
body { margin:auto; }
/*yamaha */
#yamaha { width:990px; height:450px; position:relative; opacity:0; -moz-animation: yamaha 40s linear; }
#yamaha div { position:absolute; background: 0 0 no-repeat; }
#yamaha .bg1 { width:990px; height:450px; background:url("../images/bg1.jpg");-webkit-animation: bg1 2s linear;-moz-animation: bg1 2s linear;}
#yamaha .pic1 {
width:990px;
height:142px;
background:url("../images/pic1.png");
z-index:2;
top:308px;
opacity:0;
-moz-animation: pic1 100s linear 2s;
}
/* Safari and Chrome */
#-webkit-keyframes yamaha {
0% { opacity:0; }
1% { opacity:1; }
50% { opacity:1; }
51% { opacity:0; }
100%; { opacity:0; }
}
#-webkit-keyframes bg1 {
0% { opacity:0; }
100%; { opacity:1; }
}
#-webkit-keyframes pic1 {
0% { -webkit-transform:scale(0); opacity:0; }
1% { -webkit-transform:scale(1); opacity:1; }
100%; { -webkit-transform:scale(1); opacity:1; }
}
/* Firefox */
#-moz-keyframes yamaha {
0% { opacity:0; }
1% { opacity:1; }
50% { opacity:1; }
51% { opacity:0; }
100%; { opacity:0; }
}
#-moz-keyframes bg1 {
0% { opacity:0; }
100%; { opacity:1; }
}
#-moz-keyframes pic1 {
0% { -moz-transform:scale(0); opacity:0; }
1% { -moz-transform:scale(1); opacity:1; }
100%; { -moz-transform:scale(1); opacity:1; }
}
Thank a lot.

Answer 1

#yamaha {
width:990px;
height:450px;
position:relative;
opacity:0;
-moz-animation: yamaha 40s linear;
-webkit-animation: yamaha 40s linear; /* Add this */
animation: yamaha 40s linear; /* Add this */
}
#yamaha .bg1 {
width:990px;
height:450px;
background:url("../images/bg1.jpg");
-webkit-animation: bg1 2s linear;
-moz-animation: bg1 2s linear;
animation: bg1 2s linear; /* Add this */
}
/* and add this */
#keyframes yamaha {
0% { opacity:0; }
1% { opacity:1; }
50% { opacity:1; }
51% { opacity:0; }
100%; { opacity:0; }
}
#keyframes bg1 {
0% { opacity:0; }
100%; { opacity:1; }
}
#keyframes pic1 {
0% { -webkit-transform:scale(0); opacity:0; }
1% { -webkit-transform:scale(1); opacity:1; }
100%; { -webkit-transform:scale(1); opacity:1; }
}
I hope this helps