CSS Animation Transition Trouble - débordement de pile

I put this css image transition type thing together in notepad++ after glancing at some examples online, and it worked just fine in any browser. Now I copy and pasted the code into a much large website project in visual studio and the transition effect just refuses to work in Chrome, and Firefox, but will work in IE... I tried to delete every parent div tag I could find in the project and the animation effect still did not work.. It just loads all three images like ordinary html with no css. Any ideas would be awesome...

@-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="img/1small.png" />
    <img src="img/2small.png" />
    <img src="img/3small.png" />

</div>

One problem is that you have two id's on your div, if you need multiple selectors you should consider using a class/classes instead. Try this:

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

and refining your selector to

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

etc.

I put this css image transition type thing together in notepad++ after glancing at some examples online, and it worked just fine in any browser. Now I copy and pasted the code into a much large website project in visual studio and the transition effect just refuses to work in Chrome, and Firefox, but will work in IE... I tried to delete every parent div tag I could find in the project and the animation effect still did not work.. It just loads all three images like ordinary html with no css. Any ideas would be awesome...

@-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="img/1small.png" />
    <img src="img/2small.png" />
    <img src="img/3small.png" />

</div>

One problem is that you have two id's on your div, if you need multiple selectors you should consider using a class/classes instead. Try this:

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

and refining your selector to

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

etc.

Source