pokeball shake

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;
   }
 }