Javascript 简单图像幻灯片上的随机动画

我想在幻灯片图像上应用随机动画。首先，我尝试添加一个动画，比如scale，但它并没有像我希望的那样工作

我想解决的问题：

fadein上的平滑度

随机动画（在这一点上可以是任何东西，我只想看看它是如何完成的）

小提琴：

$（函数（）{
$（'img'）.hide（）；
函数anim（）{
$（“#wrap img”）.first（）.appendTo（“#wrap”）.fadeOut（3500）.addClass（'transition'）.addClass（'scaleme'）；
$（“#wrap img”）.first（）.fadeIn（3500）.removeClass（'scaleme'）；
设置超时（动画，3700）；
}
动漫（）；
});
body，
html{
保证金：0；
填充：0；
背景：黑色；
}
#包裹img{
位置：绝对位置；
排名：0；
显示：无；
宽度：100%；
身高：100%；
}
.过渡{
过渡时间：10秒；
}
斯卡莱姆先生{
过渡时间：10秒；
转换：比例（1.3）；
}
.盒子{
高度：300px；
宽度：500px；
位置：相对位置；
溢出：隐藏；
}
下面是一个使用CSS动画和jQuery的示例（用于实现动画的随机性）。如果您不希望使用CSS动画，并且希望坚持使用transitions+jQuery效果（如
fadeIn
），您仍然可以修改此代码以支持它，因为基本思想仍将保持不变。我对jQuery效果不太满意，因此一直坚持使用CSS动画

下面是如何完成的概述（有关更多详细信息，请参阅内联注释）：


包装内有一组图像，它们是幻灯片放映的一部分（就像在演示中一样）
使用CSS
@keyframes
，除了默认的淡入淡出动画之外，还会创建一个动画列表（其中一个将随机使用）。这个列表也保存在一个数组变量中（在JS中用于从列表中随机选取一个）
加载时，默认淡入淡出动画和一个随机动画将添加到第一个元素
一个
animationend
事件处理程序被添加到所有图像中。当元素上的动画结束时，将触发此事件处理程序。触发此选项后，将删除当前元素上的动画，并将默认淡入淡出+随机动画添加到下一个元素
动画是使用内联样式添加的，因为如果我们添加多个CSS类，每个类都有一个不同的动画，那么最新类中的动画将覆盖其他类（也就是说，它们不会同时发生）
通过检查当前元素是否有任何其他
img
同级元素，可以实现循环效果。如果没有，动画将添加回第一个元素


$（窗口）.load（函数（）{
$img=$（'img'）；//图像
var anim=['zoom'、'shrink'、'move down up'、'move right left']；//随机动画列表
var rand=Math.floor（Math.random（）*4）+1；//随机数
$img.each（function（）{//为每个映像附加事件处理程序
$（this）.on（'animationend'，函数（e）{//当一个图像上的动画结束时
如果（e.originalEvent.animationName=='fade-in-out'）{//检查动画的名称
rand=Math.floor（Math.random（）*4）+1；//获取一个随机数
$（this.css（'animation-name'，'none'）；//删除当前元素上的动画
if（$（this.next（'img'）.length>0）//如果存在下一个同级
$（this）.next（'img'）.css（'animation-name'，'fade-in'，+anim[rand-1]）；//在下一个兄弟上添加动画
其他的
$img.eq（0.css（'animation-name'，'fade-in'，+anim[rand-1]）；//否则在第一个图像上添加动画（循环）
}
});
});
$img.eq（0.css（'animation-name'、'fade-in-out'、+anim[rand-1]）；//加载时将动画添加到第一个元素
})
#包装器{
高度：250px；
宽度：300px；
位置：相对位置；
}
img{
位置：绝对位置；
z指数：1；
底部：20px；
左：10px；
不透明度：0；
变换原点：左上；/*位于安全侧*/
动画持续时间：3s；/*仅在希望持续时间更长时增加*/
动画填充模式：向后；/*填充模式-最好不要更改*/
动画迭代次数：1；/*迭代次数-不更改*/
动画计时功能：轻松；/*最好保持原样，但可以更改*/
}
@关键帧淡入淡出{
0%, 100% {
不透明度：0；
}
33.33%，66.66%{/*持续时间为3s，所以在1s时淡入，保持到2s，从2s淡出*/
不透明度：1；
}
}
@关键帧缩放{
0%, 100% {
变换：比例（1）；
}
50% {
转换：比例（1.5）；
}
}
@关键帧收缩{
0%, 100% {
变换：比例（1）；
}
50% {
变换：缩放（.5）；
}
}
@关键帧向下向上移动{
0%, 100% {
变换：translateY（0px）；
}
50% {
变换：translateY（50px）；
}
}
@关键帧左右移动{
0%, 100% {
转换：translateX（0px）；
}
50% {
转换：translateX（50px）；
}
}

改进了这种平滑度，如果您愿意，可以正确设置动画。编辑：忘记链接：很好，这对我很有帮助，仍然在尝试如何制作随机动画嘿，很抱歉反应太晚，我一直很忙，这肯定有帮助，我只是想在尝试后给出最好的答案。哦，对不起，这很好@Snorlax。我不确定，因为它偏离了您最初的方法：）