diff --git a/static/css/style.css b/static/css/style.css
index 7c4a536..ce70c0f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -13,18 +13,23 @@ table {
 * {
   --animation-duration: 0.4s;
   -webkit-transition:
+    all var(--animation-duration),
     background-color var(--animation-duration),
     opacity var(--animation-duration);
   -moz-transition:
+    all var(--animation-duration),
     background-color var(--animation-duration),
     opacity var(--animation-duration);
   -o-transition:
+    all var(--animation-duration),
     background-color var(--animation-duration),
     opacity var(--animation-duration);
   -ms-transition:
+    all var(--animation-duration),
     background-color var(--animation-duration),
     opacity var(--animation-duration);
   transition:
+    all var(--animation-duration),
     background-color var(--animation-duration),
     opacity var(--animation-duration);
 }
diff --git a/static/js/player.js b/static/js/player.js
index 70ea019..290c4cc 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -420,8 +420,8 @@ function expand() {
 function collapse() {
   if (playerEl.classList.contains("exapnded")) {
     playerEl.classList.remove("exapnded");
-    expandedMobilePlayer.classList.add("hidden");
     collapsedMobilePlayer.classList.remove("hidden");
+    expandedMobilePlayer.classList.add("hidden");
   }
 }
 
diff --git a/views/components/player/mobile_player.templ b/views/components/player/mobile_player.templ
index fe95ace..1bb99a0 100644
--- a/views/components/player/mobile_player.templ
+++ b/views/components/player/mobile_player.templ
@@ -24,7 +24,6 @@ templ mobilePlayer() {
         .collapsed {
             height: 90px;
             max-height: 90px;
-            transition: max-height .5s;
         }
         .exapnded {
             height: 550px;