<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 * 2}px;
            height: ${div.offsetHeight * 2}px;
            `

            div.parentElement.append(poof)



            for (let y = 0; y < 4; y++) {
                for (let x = 0; x < 4; x++) {
                    const part = document.createElement("span")
                    part.style = `
                    --cloud: url(https://static.vecteezy.com/system/resources/thumbnails/013/994/726/small/white-3d-cloud-png.png);
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    background: linear-gradient(crimson, crimson) no-repeat center / contain, var(--cloud) no-repeat center / contain;
                    background-blend-mode: multiply;
                    mask: var(--cloud) no-repeat center / contain;
                    top:50%;
                    left: 50%;
                    translate: -50% -50%; 
                    `
                    parts.push(part)
                    poof.append(part)
                }
            }


            parts.forEach((p, i) => {
                animations.push(
                    p.animate([
                        { transform: `translate(${rand(-200, 200)}px, ${rand(-200, 200)}px) scale(2)`, opacity: 0 }
                    ], {
                        duration: 500,
                        easing: "ease-out",
                        fill: "forwards",
                        delay: rand(0, 100)
                    })
                )
            })

            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)