以固定时间间隔更改内容的动画延迟属性

Question

我正在尝试动画两张图片，以便它们以固定的时间间隔更改，但问题在于第二个图像很快就会出现并消失我需要一种方法来使延迟属性重复已审阅本，但似乎并没有工作CSS animation delay in repeating
http://jsfiddle.net/fc3nb5rL/2/

我想我的问题是在这里某处

@-webkit-keyframes anim { 
from { 
    z-index:1; 
} 
to { 
    z-index:-2; 
} 
} 
.back { 
-webkit-animation:anim 5s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes anim2 { 
from { 
    z-index:1; 
} 
to { 
    z-index:-2; 
} 
} 

Answer 1

首先解决您的HTML (markup)，那么你可以动画opacity而不是z-index

.container { 
 
    position:relative; 
 
    height:500px; 
 
    width:500px; 
 
    margin:0 auto; 
 
} 
 
.container img { 
 
    position:absolute; 
 
    width:100%; 
 
} 
 

 
@-webkit-keyframes anim1 { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 

 

 
@-webkit-keyframes anim2 { 
 
    from { 
 
     opacity:1; 
 
    } 
 
    to { 
 
     opacity:0; 
 
    } 
 
} 
 

 
[href=first] img { 
 
    opacity:0; 
 
    /*animation----:----name--duration--delay--timing function---direction----iteration count*/ 
 
    -webkit-animation: anim1 2s 0s linear alternate infinite; 
 
} 
 
[href=second] img { 
 
    opacity:1; 
 
    -webkit-animation: anim2 2s 0s linear alternate infinite; 
 
}

<div class="container"> 
 
    <a href="second"> 
 
     <img src="http://placekitten.com/300/300" /> 
 
    </a> 
 
    <a href="first"> 
 
     <img class="front" src="http://placekitten.com/300/301" /> 
 
    </a> 
 
</div>

Answer 2

Give this a shot. I have also set it up to be cross-browser compatible. http://jsfiddle.net/fc3nb5rL/2/ 

A few things to note about CSS3 transitions. It does not know how to interpolate between the z-index  
property, as well as the display property.