css - CSS3 不透明度在 Safari、Chrome 和 ie 中不起作用

Question

我只能在 Firefox 中预览。请帮我。

链接到小提琴

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; }
}    

非常感谢。

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; }
} 

我希望这有帮助