feat: coin-icon earned (with animation)

nostalgic-css · Feb 9, 2019 · 029bf0a · 029bf0a
1 parent a0aed6a
commit 029bf0a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;
+  }
+}