diff --git a/docs/icons.stories.js b/docs/icons.stories.js
index ff41eb5..6dd4269 100644
--- a/docs/icons.stories.js
+++ b/docs/icons.stories.js
@@ -33,6 +33,7 @@ stories.add('icon', () => {
     'snes-logo': 'snes-logo',
     'snes-jp-logo': 'snes-jp-logo',
     'nes-coin': 'nes-coin',
+    'nes-coin earned': 'nes-coin earned',
   }, 'nes-icon twitter');
   const selectedSize = radios('size', {
     default: '',
diff --git a/scss/pixel-arts/coin.scss b/scss/pixel-arts/coin.scss
index 1ddad3d..632b455 100644
--- a/scss/pixel-arts/coin.scss
+++ b/scss/pixel-arts/coin.scss
@@ -33,4 +33,9 @@
 
     @include pixelize($size, $coin, $coin-colors);
   }
+
+  &.earned {
+    animation: rotateIn 1.4s ease-out forwards,
+    fadeOut 2s ease-out forwards;
+  }
 }
diff --git a/scss/utilities/animations.scss b/scss/utilities/animations.scss
index f0f088b..f732dd2 100644
--- a/scss/utilities/animations.scss
+++ b/scss/utilities/animations.scss
@@ -7,3 +7,23 @@
     opacity: 0;
   }
 }
+
+@keyframes rotateIn {
+  0% {
+    opacity: 0;
+    transform: rotateY(0) translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: rotateY(1800deg) translateY(0);
+  }
+}
+
+@keyframes fadeOut {
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}