html - 动画延迟属性以固定间隔更改内容

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(标记)，然后您可以为 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>