<div></div>

div{
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100px;
  height: 100px;
  background-color: crimson;
  cursor:pointer;
  }

const div = document.querySelector("div");
        let parts = [];
        let animations = [];


        div.onclick = (e) => {

            const poof = document.createElement("span")
            poof.style = `
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            width: ${div.offsetWidth}px;
            height: ${div.offsetHeight}px;
            `

            div.parentElement.append(poof)



            for (let y = 0; y < 16; y++) {
                const part = document.createElement("span")
                part.style = `
                    position: absolute;
                    width: 25px;
                    height: 25px;
                    background-color: crimson;
                    left: 50%;
                    top: 50%;
                    translate: -50% -50%;
                    `
                parts.push(part)
                poof.append(part)
            }


            parts.forEach(p =>
                animations.push(
                    p.animate([
                        { transform: `translate(${rand(-200, 200)}px,${rand(-200, 200)}px) scale(0.001)` }
                    ], {
                        duration: 1000,
                        easing: "ease",
                        fill: "forwards"
                    })
                )
            )

            animations.unshift(
                div.animate([
                    { transform: "scale(0)" }
                ], {
                    duration: 250,
                    fill: "forwards",
                })
            )


            return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })
        }
        const rand = (min, max) => Math.floor(Math.random() * (max - min) + min)