diff --git a/js/playfield.js b/js/playfield.js index 6f1c37d..426ad10 100644 --- a/js/playfield.js +++ b/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 diff --git a/style.css b/style.css index 0a78c64..9474e0c 100644 --- a/style.css +++ b/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; }