为什么我的 css 滑块不能在 chrome 中工作，但在 IE 和 Fifox 中工作

Question

link towards my slider that i striped out of my webiste

我从一个网站上得到了这个滑块，它在 chrome 中运行，但我在 css 中更改了一些东西，现在它只适用于 IE 和 firefox

在 Chrome 的检查器中，我看到它在 (animation-delay: 0s; 和 animation-delay: 0s;) 上有一些错误

#slider {
margin: 00px auto;
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.photo {
position: absolute;
animation: round 16s infinite;
-webkit-animation:round 16s infinite;
-o-animation:round 16s infinite;
-moz-animation:round 16s infinite;
-ms-animation:round 16s infinite;
opacity: 0;
}
@keyframes round{   
25%{opacity:1;}
  40%{opacity:0;}
}
@-webkit-keyframe round{
  25%{opacity:1;}
  40%{opacity:0;}
}
@-o-keyframes round {
  25%{opacity:1;}
  40%{opacity:0;}
}
@-moz-keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
}

@-ms-keyframes round{   
 25%{opacity:1;}
  40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

img:nth-child(4){-webkit-animation-delay:0s;}
img:nth-child(3){-webkit-animation-delay:4s;}
img:nth-child(2){-webkit-animation-delay:8s;}
img:nth-child(1){-webkit-animation-delay:12s;}

img:nth-child(4){-moz-animation-delay:0s;}
img:nth-child(3){-moz-animation-delay:4s;}
img:nth-child(2){-moz-animation-delay:8s;}
img:nth-child(1){-moz-animation-delay:12s;}

img:nth-child(4){-ms-animation-delay:0s;}
img:nth-child(3){-ms-animation-delay:4s;}
img:nth-child(2){-ms-animation-delay:8s;}
img:nth-child(1){-ms-animation-delay:12s;}

img:nth-child(4){-o-animation-delay:0s;}
img:nth-child(3){-o-animation-delay:4s;}
img:nth-child(2){-o-animation-delay:8s;}
img:nth-child(1){-o-animation-delay:12s;}

Answer 1

你错过了@-webkit-keyframes的“s”

替换这个

@-webkit-keyframe round{
  25%{opacity:1;}
  40%{opacity:0;}
}

有了这个

@-webkit-keyframes round{
  25%{opacity:1;}
  40%{opacity:0;}
}