动画延迟属性以固定间隔更改内容答案

【问题标题】：Animation delay property to change content at fixed intervals动画延迟属性以固定间隔更改内容
【发布时间】：2014-09-25 21:38:25
【问题描述】：

我正在尝试为两张图片制作动画，以便它们以固定的时间间隔更改，但问题是第二张图片出现迅速并逐渐消失我需要一种方法来使延迟属性重复我已经对此进行了裁判，但这似乎并不上班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;
}
}

【问题讨论】：

标签： html css animation

【解决方案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>

【讨论】：

这很棒但是在我的代码中图片有不同的链接但是这里只有一个
你的链接是什么？你的意思是来源src？
图片是指向特定页面的链接，每张图片都有自己的链接，但如果您使用不透明度，则只有一个链接（对于放置在顶部的图片），另一个链接将具有相同的链接
你的意思是主播<a>？在您的示例中，first 和 second 在我的演示中相同，只是标记是固定的。
使用 z-index 时，第一张图片将带您到“第一”，第二张图片将带您到“第二”（如果您将鼠标悬停在我的演示）

【解决方案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.

【讨论】：

很抱歉将所有内容都放在代码窗口中，stackoverflow 告诉我我的小提琴链接需要缩进，所以我这样做了，但除非我缩进所有内容，否则不会让我发布
感谢您帮助我，我得到了答案，使用百分比似乎可以解决问题