From 78a7174342b1c8fb0d11e9862f5e4feab2300f52 Mon Sep 17 00:00:00 2001
From: Jeff Colombo <jeff@colombo.us>
Date: Tue, 19 Feb 2019 21:20:13 -0500
Subject: [PATCH] pokeball shake

---
 src/scss/sprites.scss | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/scss/sprites.scss b/src/scss/sprites.scss
index 5268e2e..bdadeaf 100644
--- a/src/scss/sprites.scss
+++ b/src/scss/sprites.scss
@@ -3,6 +3,34 @@ $scale: 4;
 .pokeball {
   $pokeball-scale: 2;
 
+  @keyframes shake {
+    5%,
+    45% {
+      transform: rotate(-1deg);
+    }
+
+    10%,
+    40% {
+      transform: rotate(2deg);
+    }
+
+    15%,
+    25%,
+    35% {
+      transform: rotate(-4deg);
+    }
+
+    20%,
+    30% {
+      transform: rotate(4deg);
+    }
+
+    50%,
+    100% {
+      transform: rotate(0);
+    }
+  }
+
   display: inline-block;
   background: url('../img/pokeballs.png') no-repeat;
   background-size: 32px * $pokeball-scale 80px * $pokeball-scale;
@@ -17,6 +45,11 @@ $scale: 4;
   image-rendering: crisp-edges;
   image-rendering: pixelated;
   -ms-interpolation-mode: nearest-neighbor;
+  transform-origin: 50% 75%;
+
+  &:hover {
+    animation: shake 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
+  }
 
   &.great-ball {
     background-position: 0 * $pokeball-scale -16px * $pokeball-scale;
@@ -36,6 +69,7 @@ $scale: 4;
 
   &.ball-open {
     background-position-x: -16px * $pokeball-scale;
+    animation: none;
   }
 }