i want make particle event in React component(current not animation) - css

Question

i want make particle event in div element on React component using useRef
but it is not working animation.
codes
const particles = useRef<HTMLDivElement>(null!);
**set parent ref(paricles) and create child particle.
and set useCallback for set location child particle and animation**
const particleEffect = useCallback(() => {
console.log("???");
const np = particles.current.clientWidth / 70;
particles.current.innerHTML = "";
const childRe = [] as HTMLDivElement[];
for (let i = 0; i < np; i++) {
const child = document.createElement("div");
childRe.push(child);
}
for (let i = 0; i < np; i++) {
const w = particles.current.clientWidth;
const h = particles.current.clientHeight;
const rndw = Math.floor(Math.random() * w) + 1;
const rndh = Math.floor(Math.random() * h) + 1;
const widthpt = Math.floor(Math.random() * 12) + 3;
const opty = Math.floor(Math.random() * 5) + 2;
const anima = Math.floor(Math.random() * 12) + 8;
childRe[i].classList.add(`${classes(styles.particle)}`);
childRe[i].style.marginLeft = `${rndw}px`;
childRe[i].style.marginTop = `${rndh}px`;
childRe[i].style.width = `${widthpt}px`;
childRe[i].style.height = `${widthpt}px`;
childRe[i].style.background = "white";
childRe[i].style.opacity = `${opty}`;
childRe[i].style.animation = `move ${anima}s ease-in infinite `;
particles.current.appendChild(childRe[i]);
}
}, [particles.current]);
and then, i make eventHandler for call useCallback function
useEffect(() => {
if (!particles.current) {
return;
}
particleEffect();
window.addEventListener("resize", particleEffect);
window.addEventListener("load", particleEffect);
return () => {
window.removeEventListener("resize", particleEffect);
window.removeEventListener("load", particleEffect);
};
}, []);
in css
.particles {
position: absolute;
overflow: hidden;
width: 100%;
height: 100vh;
top: 0;
left: 0;
filter: blur(8px);
.particle{
border-radius: 50%;
position: absolute;
}
}
#keyframes move {
0%{
transform: translateX(0vh);
opacity: 0;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
transform: translateX(45vh);
opacity: 0;
}
}
but animation css not working...
why is not working...?
what should i fix it?
example
https://codepen.io/ricardoolivaalonso/pen/agdRRB