.sparkle {
    position:absolute;
    width:30px;
    height:30px;
    pointer-events:none;
    z-index:9999;
    animation:sparklePop 0.7s ease-out forwards;
}


@keyframes sparklePop {
    0% {
        transform:
        scale(0.5)
        rotate(0deg);
        opacity:1;
    }

    100% {
        transform:
        translate(var(--x),var(--y))
        scale(1.5)
        rotate(180deg);
        opacity:0;
    }
}