-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
- G
- boom
-
-
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
-
L
-
tink
+
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
-
+
+
+
+
+
+
+
+
+
+
+ function removeTransition(e) {
+ if (e.propertyName !== 'transform') return;
+ this.classList.remove('playing');
+ };
+ const keys = document.querySelectorAll('.key');
+ keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 259280d228..e023c8e613 100644
--- a/02 - JS + CSS Clock/index-START.html
+++ b/02 - JS + CSS Clock/index-START.html
@@ -61,11 +61,33 @@
background:black;
position: absolute;
top:50%;
+ transform-origin:100%;
+ transform:rotate(90deg);
+ transition:all 0.05s;
+ transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}