.particle { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: #ff5c50; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: explode 1700ms ease-out forwards; } @keyframes explode { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0); } }