Problema de Transição de Animação CSS - css

Eu coloquei essa coisa de tipo de transição de imagem cssjuntos no notepad ++ depois de olhar alguns exemplos online, e funcionou muito bem em qualquer navegador. Agora copiei e colei o código em um projeto de site muito grande no visual studio e o efeito de transição apenas se recusa a funcionar no Chrome e no Firefox, mas funcionará no IE ... Eu tentei excluir todas as tags div que encontrei o projeto e o efeito de animação ainda não funcionaram .. Ele apenas carrega todas as três imagens como html comum sem css. Qualquer ideia seria incrível ...

@-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="login-left-container logoTransition ">

<img src="/images/img/1small.png" />
<img src="/images/img/2small.png" />
<img src="/images/img/3small.png" />

</div>

Respostas:

Um problema é que você tem dois id's em seu div, se você precisar de vários seletores você deve considerar usar uma classe / classes. Tente isto:

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

e refinar seu seletor para

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