Add cannon recoil animation

html/images/space.svg

@@ -100,6 +100,15 @@
       opacity: 0.2;
       r: 5px;
     }
+
+    #cannon .tip {
+      transform: translate(-2px);
+    }
+
+    #cannon .tip.recoil {
+      transform: translate(0px);
+      transition: transform 0.25s ease-out;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -110,7 +119,8 @@
     <circle id="body" cx="0" cy="0" r="5"/>
     <circle cx="0" cy="0" r="3" fill="transparent" stroke="green" />
     <g id="cannon">
-      <line x1="4" y1="0" x2="6.5" y2="0" stroke="black"/>
+      <line class="tip recoil" x1="4" y1="0" x2="6.5" y2="0" stroke="black"/>
+      <line x1="1" y1="0" x2="4" y2="0" stroke="white" stroke-width="3" />
       <line x1="1" y1="0" x2="4" y2="0" stroke="black" stroke-width="1.5" />
     </g>
     <line id="velocity-indicator" x1="0" y1="0" x2="0" y2="0"/>
@@ -1356,6 +1366,9 @@ function drawShot(shot) {
   lineEl.setAttribute('y2', shot.target.y);
   lineEl.addEventListener('transitionend', e => e.target.remove());
   setTimeout(() => lineEl.classList.add('fade'), 1000);
+  const tipEl = document.querySelector("#cannon .tip")
+  tipEl.classList.remove("recoil");
+  setTimeout(() => tipEl.classList.add('recoil'), 0);
 
   let pt, hit;
   for (let i = 0; i <= lineEl.getTotalLength(); i++) {