CSS3不透明在Safari，Chrome和IE中不起作用

我只能在Firefox中预览。请帮帮我。CSS3不透明在Safari，Chrome和IE中不起作用

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

感谢了很多。

来源

2013-03-25 chisu26

http://jsfiddle.net/chisu26/J86mW/ – chisu26 2013-03-25 04:30:33

这将有助于如果你的代码是不是这样不可读。您不必在一行中编写所有CSS属性。 – Blender 2013-03-25 04:31:59

请将绝对URL与图片一起使用。我们根本无法看到图像。 – Raptor 2013-03-25 04:33:23

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

我希望这有助于

来源

2013-03-26 03:36:25 apaul

CSS3不透明在Safari，Chrome和IE中不起作用

回答

相关问题