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.

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

2 个答案: