jQuery and "water floating" effect

EDIT: As a member pointed out the problem here below seems to happen in Safari, not in Firefox. Any idea why ?

I'm studying a code found online in order to make div appear like floating on water. The original code is here: https://codepen.io/ScottPolhemus/pen/xsgco

I played with it and made it as simple as possible : https://jsfiddle.net/7krv20bx/1/

And here is the code :

$(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>

So far so good. but I need to create my own spans while the code is generating them automatically. So, I started to just add manually in the HTML a few

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

This way, I get a few manually added spans and a few automatically generated ones so that I can see how the scripts reacts. But then, the scripts only animates the automatically generated ones, not the ones I added manually.

Here is the JSFiddle: https://jsfiddle.net/7krv20bx/

I don't understand why since the "makeConfetti" function only adds spans, it shouldn't do anything in terms of animation. So, it feels to me like the animation should impact ALL the spans as long as they share the same class, not only those generated by the MakeConfetti function.

My ultimate goal is to have no automatically generated spans and to get rid of that 'MakeConfetti" function. But if I do so, the spans are not animated.

Can I ask you why ?

Thank you.