Question

我在网上浏览了一些例子之后，把这个css图像过渡类型的东西放在记事本++中，它在任何浏览器中都运行得很好。现在我将代码复制并粘贴到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="login-left-container logoTransition ">

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

</div>

Answer 1

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

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

并将您的选择器精简到

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

等

CSS动画转换麻烦

1 个答案: