CSS动画转换问题

在浏览了一些在线示例之后，我将这个css图像转换类型的东西放在了notepad++中，它在任何浏览器中都运行良好。现在我在visual studio中复制并粘贴代码到一个很大的网站项目中，过渡效果在Chrome和Firefox中不起作用，但在IE中可以起作用。。。我试图删除项目中可以找到的每个父div标记，但动画效果仍然不起作用。。它只是像普通html一样加载所有三个图像，没有css。任何想法都会很棒

@-webkit-keyframes showLogo {
 0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@-moz-keyframes showLogo {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
 }

 @-o-keyframes showLogo {
 0% {
  opacity:1;
 }
 17% {
opacity:1;
}   
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@keyframes showLogo {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

#logoTransition img {
position:absolute;
left:0;
}

#logoTransition {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}

#logoTransition img {
-webkit-animation-name: showLogo;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;

-moz-animation-name: showLogo;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;

-o-animation-name: showLogo;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 30s;

 animation-name: showLogo;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 30s;
}
#logoTransition img:nth-of-type(1) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
animation-delay: 10s;
}
#logoTransition img:nth-of-type(2) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
 animation-delay: 10s;
}
#logoTransition img:nth-of-type(3) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
 animation-delay: 10s;
}

Html

一个问题是你的div上有两个ID，如果你需要多个选择器，你应该考虑使用一个类/类来代替。试试这个：

<div id="login-left-container" class="logoTransition">
  <img...>
  <img...>
  <img...>
</div>

等等

<div id="login-left-container" class="logoTransition">
  <img...>
  <img...>
  <img...>
</div>

 .logoTransition img:nth-of-type(1) {...}