Add rainbow color animation on keys

lyubchev · lyubchev · commit 459156ced62d · 2018-11-14T21:24:42.000+02:00
diff --git a/01 - JavaScript Drum Kit/assets/css/styles.css b/01 - JavaScript Drum Kit/assets/css/styles.css
@@ -49,4 +49,54 @@ kbd {
     text-transform: uppercase;
     letter-spacing: .1rem;
     color: #ffc600;
-}
+}
+
+.rainbow-color {
+	-webkit-animation: color-change-4x 0.8s linear alternate backwards;
+          animation: color-change-4x 0.8s linear alternate backwards;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2018-11-14 20:52:57
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation color-change-4x
+ * ----------------------------------------
+ */
+ @-webkit-keyframes color-change-4x {
+  0% {
+    background: #19dcea;
+  }
+  25% {
+    background: #b22cff;
+  }
+  50% {
+    background: #ea2222;
+  }
+  75% {
+    background: #f5be10;
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes color-change-4x {
+  0% {
+    background: #19dcea;
+  }
+  25% {
+    background: #b22cff;
+  }
+  50% {
+    background: #ea2222;
+  }
+  75% {
+    background: #f5be10;
+  }
+  100% {
+    background: transparent;
+  }
+}
diff --git a/01 - JavaScript Drum Kit/assets/js/main.js b/01 - JavaScript Drum Kit/assets/js/main.js
@@ -10,12 +10,12 @@ handleKeyDown = e => {
     audio.currentTime = 0;
     audio.play();
     key.classList.add('playing');
+    key.classList.add('rainbow-color');
 
     // listen for transionend so styles can be removed after the transition is done
-    key.addEventListener('transitionend', () =>
-      key.classList.remove('playing')
-    );
+    key.addEventListener('transitionend', () => key.classList.remove('playing'));
+    key.addEventListener('animationend', () => key.classList.remove('rainbow-color'));
   }
 };
 
-window.addEventListener('keydown', handleKeyDown);
+window.addEventListener('keydown', handleKeyDown);
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div class="keys">  
-      <div data-key="a" class="key">
+      <div data-key="a" class="key rgb-border">
         <kbd>A</kbd> <span class="sound">clap</span>
       </div>
       <div data-key="s" class="key">
