Simulando una colisión con CSS

Volví a Blogger después de tanto tiempo. Una pena haber dejado abandonado blogdesign y retomar muy pocas veces el hábito de indagar acerca de las novedades en el CSS y el diseño web.
Ahora ya casi iniciando los años universitarios, me gustaría volver a escribir acerca de ésto que un tiempo me apasionó y aún me sigue sorprendiendo y fue clave en la elección de mi carrera.
Hace unos días ingresé a mi cuenta de Codepen tras intentos e intentos de acertar con mi usuario y contraseña. Quedé sorprendido de las ingenuidades que publicaba hace años, y mi interés sobre cómo pude lograr todo eso a través de la programación volvió a despertar.
El último pen de mi propiedad se titula "Simulating collision with CSS". A continuación insertado.
Lo que quise demostrar era cómo simular el evento de colisión (que seguido vemos en vídeo juegos) sólo utilizando CSS y sin recurrir a otros lenguajes más oportunos que seguramente lo facilitarían todo. Últimamente los desafíos y experimentos con CSS se basan en esto, romper los límites y dejar a los otros lenguajes boquiabiertos.
Entonces, encontramos un camioncito que podemos manejar con las dos flechas de arriba. Al dirigirlo hacia el camión de la derecha, ambos cambian de color y aparece una señal indicando que entraron en contacto.
Invitados son a reciclar mi pen para utilizarlo como inspiración. Ahora continuaré con el análisis del código que empleé. A medida que redacto este post lo voy descubriendo con paciencia porque realmente no me acuerdo nada.
El HTML no es nada de otro mundo. Usé etiquetas comunes para insertar a los protagonistas.
En cuanto al CSS, las animaciones de la ruta y las nubes son simples agregados. Nótese también la utilización de la fuente Font Awesome para trabajar con íconos en lugar de imágenes o vectores.
Ambos camioncitos, nombrados con las clases ambu y cami están posicionados con absolute y poseen diferentes márgenes.
.ambu, .cami {
  position:absolute;
  bottom:0.2rem;
  font-size:3em;
  transform:rotatey(180deg); /* Los camioncitos miran hacia la derecha */
}
.cami {
  right:10%;
  color:#ddd;
}
.ambu {
  color:white;
  right:60%;
  transition:99999s;
}
El detalle transition:99999s; se relaciona con el truco para manejar el movimiento a través del joystick. Dicho aprendiaje lo extraje de alguna de esas famosas páginas. Agrego a mis tareas buscar un enlace y dejarlo a disposición.

En el código continuamos con este tema del movimiento a control del usuario.
.der:hover ~ .ambu {
  right:calc(10% + 3rem);
  transition:2s right linear, .1s 2s color linear;
  color:red;
}
.izq:hover ~ .ambu {
  right:80%;
  transition:2s right linear;
  transform:rotatey(0deg);
}
.der:hover ~ .cami {
  transition: .1s 2s color linear;
  color:red;
}
Traduciendo, al apoyar el mouse sobre la flecha derecha, la ambulancia disminuye su margen, lo que hace que se aproxime al otro camión. Al apoyar sobre la flecha izquierda, la ambulancia regresa a su posición inicial y mira hacia la izquierda.
En los estilos donde se involucra el pasar el cursor sobre la flecha derecha, observamos un retraso de 2 segundos para que los camioncitos cambien a color rojo. Esto se debe a que es el el tiempo en que se tarda la ambulancia en arribar hasta el encuentro con el segundo camión. Aquí es donde encontramos la explicación a la forma en que se produce la simulación de colisión con CSS.
A continuación se procede a insertar la explosión como un pseudoelemento de cami:
.cami:after {
content: '*';
color: #FFF;
position: absolute;
top: .1em;
left: .9em;
text-shadow: .1em .1em #FFFE37, .1em -.1em #FFFE37, -.1em -.1em #FFFE37, -.1em .1em #FFFE37;
  opacity:0;
}
.der:hover ~ .cami:after {
  opacity:1;
  transition:.1s 2s opacity;
}
Encontramos el mismo retraso, para que la explosión sólo aparezca cuando indicamos que la ambulancia llegó a destino.
Eso es todo, lo demás son sólo animaciones de las nubes y la ruta que estaría bueno que revises y una regla para tamaño de ventana pequeños.
Ojalá mi explicación haya sido clara y este aporte sea de utilidad para quien sea.