gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:32:57 25 4
gpt4 key购买 nike

我正在尝试为两张图片制作动画,以便它们以固定的时间间隔更改,但问题是第二张图片出现得很快并且消失了我需要一种方法来使延迟属性重复我已经审阅过这个但似乎没有上类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(标记),然后您可以为 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>

关于html - 动画延迟属性以固定间隔更改内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26038819/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com