Add shake animation for shuffling piles

js/playfield.js

@@ -133,7 +133,14 @@ interact('.card-pile')
     container.appendChild(cardList);
     showModal(container);
   })
-  .on('tap', event => shuffle(piles[event.target.getAttribute('data-pile')]));
+  .on('tap', event => {
+    shuffle(piles[event.target.getAttribute('data-pile')]);
+    event.target.classList.add("shake");
+    // reset animation so it can be played again
+    event.target.onanimationend = e => {
+      event.target.classList.remove("shake");
+    };
+  });
 
 function makeCard(cardNum) {
   // draw a new card

style.css

@@ -39,6 +39,17 @@ body {
 	user-select: none;
 }
 
+.shake {
+	animation: shake 0.8s;
+}
+
+@keyframes shake {
+  10%, 90% {transform: translate(-1px, 0);}
+  20%, 80% {transform: translate(2px, 0);}
+  30%, 50%, 70% {transform: translate(-4px, 0);}
+  40%, 60% {transform: translate(4px, 0);}
+}
+
 .deck {
 	background-color: blue;
 }