jQuery 和 "water floating" 效果

Question

EDIT：正如一位成员所指出的，下面的问题似乎发生在Safari中，而不是Firefox中。知道为什么吗

我正在研究网上找到的一个代码，以便使div看起来像漂浮在水上一样。原始代码如下：https://codepen.io/ScottPolhemus/pen/xsgco

我把它玩得尽可能简单：https://jsfiddle.net/7krv20bx/1/

这是代码：

$(function() {
makeConfetti(3);
$('.confetti-pixel').each(function() {
var x = (Math.random() * 200) - 100;
var y = (Math.random() * 200) - 100;
$(this).css({
'transform': 'translateX(' + x + '%) translateY(' + y + '%)'
});
});
});
function makeConfetti(num) {
$('.confetti-layer').append(new Array(num + 1).join('<span class="confetti-pixel"></span>'));
}

.confetti-pixel {
display: inline-block;
animation: 10s confettiDrop ease-in-out infinite alternate;
border-radius: 50%;
width: 2.5%;
margin: 8% 2.5% 0;
padding-bottom: 2.5%;
animation-delay: (10s * 2 / -3);
background: black;
}
.confetti-layer {
width: 100%;
height: 100%;
text-align: center;
}
@keyframes confettiDrop {
0% {
transform: none;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="confetti-layer"></div>

到目前为止还不错。但我需要在代码自动生成跨度的同时创建自己的跨度。所以，我开始在HTML中手动添加一些

<span class="confetti-pixel"></span>

通过这种方式，我得到了一些手动添加的跨度和一些自动生成的跨度，这样我就可以看到脚本的反应了。但是，脚本只为自动生成的脚本设置动画，而不是我手动添加的脚本。

以下是JSFiddle：https://jsfiddle.net/7krv20bx/

我不明白为什么；makeConfetti"；函数只添加跨度，它不应该在动画方面做任何事情。因此，在我看来，动画应该影响所有跨度，只要它们共享同一个类，而不仅仅是MakeConfetti函数生成的那些。

我的最终目标是没有自动生成的跨度，并摆脱"MakeConfetti"；作用但如果我这样做，跨度就不会设置动画。

我能问你为什么吗？

谢谢。

Answer 1

感谢mplungjan的指导，我意识到这可能是一个"加载后"；问题所以我干脆去掉了"$(函数{}("；包装器，现在它可以在所有浏览器中工作。

Safari为什么不遵守？我不知道。

在其他情况下，这会是一个问题吗？大概

但在这种情况下，它起了作用。

仅供参考：增加"-webkit"；对CSS和JS没有任何改变。这与此无关。