fix: better animations for new tile, merged tile and scores

src/style.css

@@ -5,7 +5,12 @@
 @keyframes appear {
   0% {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.3);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.1);
   }
 
   100% {
@@ -16,63 +21,64 @@
 
 @keyframes pop {
   0% {
-    transform: scale(0);
+    transform: scale(1);
   }
 
   50% {
-    transform: scale(1.2);
+    transform: scale(1.4);
   }
 
   100% {
     transform: scale(1);
   }
 }
 
-@keyframes score-pop {
+@keyframes pop-dance {
   0% {
     transform: scale(1);
   }
+
+  25% {
+    transform: rotate(25deg);
+  }
+
   50% {
-    transform: scale(1.4);
-    color: #f59e0b;
+    transform: scale(1.8);
   }
+
   100% {
-    transform: scale(1);
+    transform: scale(1) rotate(0);
   }
 }
 
-@keyframes high-score-celebration {
+@keyframes tile-merged {
   0% {
     transform: scale(1);
   }
-  25% {
-      transform: rotate(30deg);
-  }
+
   50% {
-      transform: scale(1.8);
-      color: #f99e0b;
+    transform: scale(1.2);
   }
+
   100% {
-    transform: scale(1) rotate(0);
+    transform: scale(1);
   }
 }
 
 .tile-new {
-  animation: appear 200ms ease 100ms;
-  animation-fill-mode: backwards;
+  animation: appear 200ms ease-in-out;
 }
 
 .tile-merged {
-  animation: pop 200ms ease 100ms;
-  animation-fill-mode: backwards;
+  animation: tile-merged 200ms ease 100ms;
 }
 
 .score-changed {
-   animation: score-pop 200ms ease-in-out;
+  animation: pop 200ms ease-in-out;
 }
 
 .high-score-changed {
-  animation: high-score-celebration 200ms ease-in-out;
+  animation: pop-dance 200ms ease-in-out;
 }
 
 /** Tile Colour Start **/
@@ -136,10 +142,12 @@
   100% {
     transform: rotate(0);
   }
+
   20%,
   60% {
     transform: rotate(-25deg);
   }
+
   40%,
   80% {
     transform: rotate(10deg);
@@ -150,6 +158,7 @@
   .github-corner:hover .octo-arm {
     animation: none;
   }
+
   .github-corner .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
   }