Vamos a generar una animación visual que simula una explosión de partículas donde el efecto final parecerá el estallido de unos fuegos artificiales. La idea es hacer una animación básica simplemente con CSS.

HTML mínimo para una explosión

Partimos de una estructura básica que representa una sola explosión, centrada en la pantalla. Cada chispa o partícula es un div animado individualmente:

<div class="firework">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
</div>

Ocho partículas es una cantidad suficiente para simular una distribución radial.

Estilos CSS y animación

La animación se basa en @keyframes y transformaciones. Usamos variables CSS (--x y --y) para establecer la dirección en que se moverá cada partícula desde el centro.

body {
  margin: 0;
  background: #000;
  height: 100vh;
  overflow: hidden;
}

.firework {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ffcc00;
  border-radius: 50%;
  animation: explode 1s ease-out forwards;
}

A cada partícula le asignamos una dirección diferente para crear el efecto de explosión. Visualmente cada una se moverá desde el centro hasta una posición cardinal:

.particle:nth-child(1) { --x: -40px; --y: -40px; }
.particle:nth-child(2) { --x: 0px; --y: -50px; }
.particle:nth-child(3) { --x: 40px; --y: -40px; }
.particle:nth-child(4) { --x: 50px; --y: 0px; }
.particle:nth-child(5) { --x: 40px; --y: 40px; }
.particle:nth-child(6) { --x: 0px; --y: 50px; }
.particle:nth-child(7) { --x: -40px; --y: 40px; }
.particle:nth-child(8) { --x: -50px; --y: 0px; }

La animación la definimos así:

@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0.5);
    opacity: 0;
  }
}

Cada chispa se desplaza en una dirección distinta, disminuyendo su tamaño y opacidad.

Demostración del ejemplo

Aquí puedes ver el código en acción:

Consideraciones

• El efecto se ejecuta una vez al cargar la página. Si se desea repetir, hay que reiniciar el DOM o usar múltiples instancias.
• Es posible añadir variaciones visuales con colores o desfases de tiempo para simular diferentes tipos de explosiones.
• Para visualizaciones de fuegos artificiales más elaboradas puedes experimentar con JavaScript para ejecutar múltiples explosiones.