CSS 애니메이션 전환 문제

Question

온라인으로 몇 가지 예를 훑어 본 후이 CSS 이미지 전환 유형을 메모장 ++에 넣었습니다. 모든 브라우저에서 정상적으로 작동했습니다. 이제 코드를 복사하여 Visual Studio의 많은 대규모 웹 사이트 프로젝트에 붙여 넣었습니다. 전환 효과는 Chrome 및 Firefox에서 작동하지 않지만 IE에서는 작동합니다 ... 내가 찾을 수있는 모든 상위 div 태그를 삭제하려고했습니다. 프로젝트와 애니메이션 효과는 여전히 작동하지 않습니다. CSS가없는 일반 HTML과 같은 세 가지 이미지를 모두로드합니다. 모든 아이디어를

@-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> 

Answer 1

하나의 문제는 당신이 대신 클래스/클래스를 사용하는 것이 좋습니다 여러 선택기를 필요로하는 경우 당신이 당신의 사업부에 이드의의를 가지고있다.

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

을 등

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

에 선택기를 정제 :이 시도