Html CSS动画赢得'；I don’我不会再申请了

我目前有一个CSS动画的问题。从数组中调用随机背景，显示和更改等等。我为图像标题id应用了两个动画，一个滑入和一个延迟滑出。第一次滑入和滑出都运行良好，但当第二个背景出现时，字幕只会出现在屏幕上，没有任何动画

下面是我的代码

HTML代码：

<script type="text/javascript">

function loadRandomImage(imgs) {
    var index = Math.floor(Math.random() * imgs.length);

    console.log("loadRandomImages(): index = "+ index);

    $.backstretch(imgs[index].url, {duration: 30000, fade: 1200});  
    $("#caption").html(imgs[index].caption);
}

var images = new Array(); //array of imgs objects

images[0] = {url: "https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg", caption: "Caption0"};
images[1] = {url: "https://s-media-cache-ak0.pinimg.com/736x/e6/41/74/e64174e355f78a0f07e951bcec62ca96.jpg", caption: "Caption1"};
images[2] = {url: "https://media.giphy.com/media/3o7abHrsGbV10rCeze/giphy.gif", caption:"Caption2"};
images[3] = {url: "https://media.giphy.com/media/Bbt5FxRiArl3a/giphy.gif", caption:"Caption3"};

// Preload

setTimeout(loadRandomImage, 1000, images);

// Change images every 3 seconds

setInterval(loadRandomImage, 30000, images);

</script>


<div id="pattern"></div>
<div id="pattern2"></div>

<div id="caption"></div>

---

您需要使用回调，如下所述：

---

我认为动画方向需要改变

这些是可能的：

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

我认为您需要执行以下操作之一：

备选方案 动画将在奇数时间（1,3,5等）以正常方式播放，在偶数时间（2,4,6等）以相反方向播放

交替倒车 动画将在奇数时间（1,3,5等）以反向播放，在偶数时间（2,4,6等）以正常方向播放

目前它被设置为

animation-direction: initial, initial;

---

如图所示：

CSS动画的迭代计数（

animation iteration count

）在没有为该属性指定值时仅为1。在这里，由于没有指定任何值，动画只执行一次（即在页面加载时）。一旦动画完成循环，就没有纯粹的CSS方法来重新触发动画。必须将其从元素中移除，然后重新连接，才能重新开始

因此，对于您的情况，这里是您必须做的-（a）在页面加载时使用JS设置

#caption

上的动画，因为这样可以更容易地删除和重新添加它们（b）在完成

滑出

动画后，从元素中删除两个动画（即，设置

动画名称：none

）并且还将

#caption

的

html

设置为none，因为

：empty

选择器只会隐藏它。（c） 在元素上设置下一个图像后（使用

loadRandomImage

功能），立即将动画设置回元素上。这将重新触发动画，因此在每次图像切换期间，标题将滑入滑出

注意：我已经更改了HTML和JS中与此答案不相关的部分（例如删除两个

div

并将其替换为1，避免

$.backstretch

和使用

css（）

等加载图像。但这些只是辅助项，不会影响此答案的关键（即，删除和添加动画）

函数加载随机图像（imgs）{
var index=Math.floor（Math.random（）*imgs.length）；
$（'#img'）.css（'background-image'，'url（'+images[index].url+'））；
$（'#标题'）.css({
'动画名称'：'slidein，slideout'，
“动画持续时间”：“3s，3s”，
“动画延迟”：“0s，7s”
});
$（“#caption”）.html（imgs[index].caption）；
}
var images=new Array（）；//imgs对象的数组
图像[0]={
url:“http://lorempixel.com/100/100/nature/1",
字幕：“字幕0”
};
图片[1]={
url:“http://lorempixel.com/100/100/nature/2",
标题：“标题1”
};
图片[2]={
url:“http://lorempixel.com/100/100/nature/3",
标题：“标题2”
};
图片[3]={
url:“http://lorempixel.com/100/100/nature/4",
标题：“标题3”
};
//预载
setTimeout（loadRandomImage，1000，图像）；
$（'#caption'）。在（'animationend'，函数（e）上{
如果（e.originalEvent.animationName=='slideout'）{
$（'#caption'）.css（'animation-name'，'none'）；
$（'#标题'）.html（''）；
setTimeout（function（）{/*dummy timeout）确保浏览器在再次添加动画之前将动画视为无*/
加载随机图像（图像）；
}, 0);
}
})；

#标题{
位置：相对位置；
字体：1.5em投石机，无衬线；
文本对齐：居中；
左边缘：75%；
z指数：56；
颜色：#ffffff；
背景：rgba（0,0,0,0.7）；
填充：8px；
}
#描述：空{
显示：无；
}
@关键帧幻灯片{
0% {
左边距：100%；
宽度：100%；
可见性：隐藏；
不透明度：0；
}
100% {
左边缘：75%；
宽度：100%；
不透明度：1；
能见度：可见；
}
}
@关键帧滑出{
0% {
左边缘：75%；
宽度：100%；
不透明度：1；
能见度：可见；
}
100% {
左边距：100%；
宽度：100%；
不透明度：0；
可见性：隐藏；
}
}
/*只是为了演示*/
#img{
高度：100px；
宽度：100px；
}

---

您可以直接使用CSS解决方案，而不是已经提供的Javascript建议

• 只需将

  动画迭代计数设置为“无限”（连续交替2个元素，或设置重复次数的整数）

如果需要交错/交替动画：

• 在第二个元素上使用

  动画延迟

  （匹配

  动画持续时间

  ），使其在第一个元素动画完成之前不会出现
• 在动画结束时建立延迟（恢复到原始状态@50%），以便第一个元素在第二个元素动画时保持隐藏

---

感谢您的建议，我尝试了这两种方法，但似乎都不起作用。是否可以制作一个.capOne和一个.capTwo，并为.captone使用slidein和为.capTwo使用slideout？感谢Harry的帮助和修改我的代码，这样其他人也可以从中学习！它几乎可以完美地工作。只是一个小问题：预加载效果很好，选择e随机图像，标题滑入滑出，但当第二张图像加载时，标题就没有显示出来。奇怪，因为从第三张图像来看，它又完美地工作了。我猜预加载后发生了什么事。有什么建议吗？@U Jezy先生：不客气。很高兴我能帮上忙。你强调的问题似乎是有一点时间问题，因此我将调用

loadrandomage

函数也移动到

animatio中
animation-direction: initial, initial;