How to add fadein to this function

I want to add fade-in to this Codepen project:

https://codepen.io/Jeremboo/pen/ENVaMY?limit=all&page=2&q=particle (its not mine).

What I want to do is to create a particle slowly but I don't know how to do it.

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth));
  }
}

this is probably the code where i need to put some function i tried jquery but it wont work

one of my attempts

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth)).fadeIn( "slow" );
  }
}

I am not sure if i can add jquery to pure js function.

Solution

Have you considered adding a CSS animation to the div containing the animation?

.f {
  position: fixed
  bottom: 5px
  right: 15px
  font-family: 'Arial'
  font-size: 0.7rem
  color: mainColor
  text-align: center;
  animation:3s ease 0s normal forwards 1 fadein;
  -webkit-animation:3s ease 0s normal forwards 1 fadein;
  opacity:1;
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}