diff --git a/public/content.css b/public/content.css
index b82b469d..5fabc94d 100644
--- a/public/content.css
+++ b/public/content.css
@@ -75,26 +75,28 @@
 	vertical-align: top;
 }
 
+.autoHiding {
+	overflow: visible !important;
+}
+
 .autoHiding:not(.hidden) {
 	transform: translateX(0%) scale(1);
 	/* opacity is from YouTube page */
-	transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
+	transition: transform 0.25s, width 0.25s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
 }
 
 .autoHiding.hidden {
 	transform: translateX(100%) scale(0);
 	/* opacity is from YouTube page */
-	transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
+	transition: transform 0.25s, width 0.25s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
+
+	width: 0px !important;
 }
 
 .autoHiding.hidden.autoHideLeft {
 	transform: translateX(-100%) scale(0);
 }
 
-.autoHiding.hidden.animationDone {
-	display: none !important;
-}
-
 .playerButton.hidden {
 	display: none;
 }
diff --git a/src/utils.ts b/src/utils.ts
index 0bcd15b4..50e332ae 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -199,13 +199,6 @@ export default class Utils {
         container.addEventListener("mouseleave", () => {
             if (element.classList.contains("autoHiding")) {
                 element.classList.add("hidden");
-
-                const animationEndListener = () => {
-                    if (element.classList.contains("hidden")) element.classList.add("animationDone");
-                    element.removeEventListener("transitionend", animationEndListener);
-                };
-
-                element.addEventListener("transitionend", animationEndListener);
             }
         });
     }