我正在尝试给gif动画添加一点延迟,使其呈现从左到右的移动效果。我已经尝试使用jQuery的setTimeout方法等待几秒钟再显示gif动画。但问题是,这两个gif动画同时加载,并且会同步播放。以下是我遇到的基本示例...
setTimeout(function() {
$('.dots-animation-delay').show();
}, 2500);
div {
float: left;
width: 33%;
text-align: center;
}
.dots-animation {
position: absolute;
padding-left: 5%;
}
.dots-animation-delay {
position: absolute;
padding-left: 5%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
LEFT
<img class="dots-animation" src="https://s1.gifyu.com/images/dots.gif">
</div>
<div>
MIDDLE
<img class="dots-animation-delay" src="https://s1.gifyu.com/images/dots.gif">
</div>
<div>RIGHT</div>
我希望交替播放动画,使得左侧的淡出时右侧的淡入。是否有其他jQuery方法或CSS关键帧可以实现这一点?
setTimeout
是一个原生的 JavaScript 函数,只是想强调一下。 - Isaac Vidrine