网站褪色效果在Internet Explorer中不起作用
Website Fading Effect not Working in Internet Explorer
由于某种原因,我的网站正在衰落&定位工作,并在Chrome中看起来很棒&Firefox和Internet Explorer根本没有显示出衰落的效果,对齐也完全混乱。这是编码:
/* fade slider */
.slides {
height:600px;
margin:0px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name: anim_slides;
animation-duration: 24.0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
animation-delay: 18.0s;
}
.slides ul li:nth-child(5), .slides ul li:nth-child(5) div {
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
animation-delay: 24.0s;
}
.slides ul li img {
display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
你可以通过查看网站来查看定位的html编码-http://metroanimalshelter.org/
如有任何帮助,我们将不胜感激。
您只包含前缀为-webkit
和-moz
的CSS属性,它们分别只能在webkit和mozilla浏览器中使用。在每个包含前缀的地方,还需要包含一个不固定的属性。例如:
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
animation-delay: 6.0s;
}
同样值得注意的是,这只适用于IE10和IE11。在此之前的IE版本不支持CSS动画。http://caniuse.com/#feat=css-动画
我建议您使用autoprefixer,而不是为每个浏览器设置供应商前缀。编写更少,易于维护您的代码
https://github.com/postcss/autoprefixer
相关文章:
- 在Internet Explorer中,向所选内容添加选项不起作用
- 鼠标事件在 Internet Explorer 中不起作用
- 输入类型的图像在Internet Explorer中不起作用,但在Chrome和Firefox中起作用
- 包含jquery的Javascript在Internet Explorer中不起作用
- onClick和onClientClick事件一起使用.在Internet Explorer中不起作用
- Javascript图像动画在Firefox或Internet Explorer中不起作用
- 使用JS固定标题的表在Internet explorer中不起作用
- Angular $templateCache在 Internet Explorer 中不起作用
- 滑块图像在Internet Explorer中不起作用,但在其他浏览器中有效
- 带有 Internet Explorer 8/9 的 Editor Ace 不起作用
- Window.location 在 Internet Explorer 中不起作用
- Ajax POST 请求在 Internet Explorer 中不起作用
- 脚本在 Internet Explorer 中不起作用
- 在第二次加载时更改 iframe 样式,在 Internet Explorer 9 中不起作用
- 流体布局在 Internet Explorer 7 和 8 中不起作用
- blockUI 在 Internet Explorer 上不起作用
- Javascript在Internet Explorer上不起作用
- 屏幕键盘在 Internet Explorer 中不起作用
- jQuery 动画在 Internet Explorer 中不起作用
- 元标记中的JavaScript在Firefox和Internet Explorer上不起作用