How to make 2 particles disappear on collision

I’m trying to make a html/css program where there are 2 circles, moving in a circular path. My code so far: here
What I want is, for the particles to disappear after their first collision, instead of moving back to the right. I’ve tried thinking of possible methods, but I’m (kind of) new to css/html. Can someone please help me? Thanks.
In addition, if I want to add multiple of such particle pairs that have the same behavior, do I just add more div’s? Thanks.

I think you might need some JS magic here. You could listen for the end of the animation and then remove the circles when that event triggers.

If there is a way to do this with just CSS I’d be interested to hear from a CSS guru who knows how.

OK, I thought about it a little more and came up with one. You can set visibility: hidden on these initially and then in the keyframes you can set visibility: visible. I’m not sure if this meets all of your requirements but it does cause the circles to disappear after the collision.

I set the visibility to hidden in the circle: before, after code and visibility to visible in the keyframes, but now there are no circles appearing on the screen…can you pls help? thanks.

You need to put that inside the curly braces.

Ah, I see. Thanks so much guys!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.