diff --git a/materialious/src/lib/components/player/Player.svelte b/materialious/src/lib/components/player/Player.svelte
index 37dfe0f7..b945b29c 100644
--- a/materialious/src/lib/components/player/Player.svelte
+++ b/materialious/src/lib/components/player/Player.svelte
@@ -833,64 +833,62 @@
 		bind:playerMaxKnownTime
 		bind:playerIsBuffering
 	/>
-	{#if showControls}
-		<div id="player-controls" transition:fade>
-			<Timeline
-				{playerElement}
-				{currentTime}
-				{showPlayerUI}
-				{segments}
-				video={data.video}
-				content={data.content}
-				bind:userManualSeeking
-				bind:playerMaxKnownTime
-			/>
-			<nav>
-				{#if !$isAndroidTvStore}
-					<nav class="no-wrap">
-						<button class="surface-container-highest" onclick={toggleVideoPlaybackStatus}>
-							<i>
-								{#if playerCurrentPlaybackState}
-									pause
-								{:else}
-									play_arrow
-								{/if}
-							</i>
-						</button>
-						{#if !isMobile()}
-							<div class="player-slider volume m l" {...playerVolumeSlider.root}>
-								<div class="track">
-									<div class="range"></div>
-									<div {...playerVolumeSlider.thumb}></div>
-								</div>
-							</div>
-						{/if}
-					</nav>
-				{/if}
-
-				<div class="max"></div>
-
+	<div id="player-controls" class="hide" class:show={showControls}>
+		<Timeline
+			{playerElement}
+			{currentTime}
+			{showPlayerUI}
+			{segments}
+			video={data.video}
+			content={data.content}
+			bind:userManualSeeking
+			bind:playerMaxKnownTime
+		/>
+		<nav>
+			{#if !$isAndroidTvStore}
 				<nav class="no-wrap">
-					<p class="chip m l" style="height: 100%;">
-						{#if data.video.liveNow}
-							{$_('thumbnail.live')}
-						{:else}
-							{videoLength(currentTime)} / {videoLength(data.video.lengthSeconds)}
-						{/if}
-					</p>
-					{#if !$isAndroidTvStore}
-						<CaptionSettings video={data.video} />
-						{#if playerElement}
-							<Settings {player} {playerElement} />
-							<Airplay {playerElement} />
-							<Pip {playerElement} />
-						{/if}
-						<FullscreenToggle {toggleFullscreen} {playerIsFullscreen} />
+					<button class="surface-container-highest" onclick={toggleVideoPlaybackStatus}>
+						<i>
+							{#if playerCurrentPlaybackState}
+								pause
+							{:else}
+								play_arrow
+							{/if}
+						</i>
+					</button>
+					{#if !isMobile()}
+						<div class="player-slider volume m l" {...playerVolumeSlider.root}>
+							<div class="track">
+								<div class="range"></div>
+								<div {...playerVolumeSlider.thumb}></div>
+							</div>
+						</div>
 					{/if}
 				</nav>
+			{/if}
+
+			<div class="max"></div>
+
+			<nav class="no-wrap">
+				<p class="chip m l" style="height: 100%;">
+					{#if data.video.liveNow}
+						{$_('thumbnail.live')}
+					{:else}
+						{videoLength(currentTime)} / {videoLength(data.video.lengthSeconds)}
+					{/if}
+				</p>
+				{#if !$isAndroidTvStore}
+					<CaptionSettings video={data.video} />
+					{#if playerElement}
+						<Settings {player} {playerElement} />
+						<Airplay {playerElement} />
+						<Pip {playerElement} />
+					{/if}
+					<FullscreenToggle {toggleFullscreen} {playerIsFullscreen} />
+				{/if}
 			</nav>
-		</div>
-	{/if}
+		</nav>
+	</div>
 </div>
 
 {#if showVideoRetry}
diff --git a/materialious/src/lib/css/global.css b/materialious/src/lib/css/global.css
index 0a383162..21504181 100644
--- a/materialious/src/lib/css/global.css
+++ b/materialious/src/lib/css/global.css
@@ -28,7 +28,17 @@ body {
 }
 
 .hide {
-	display: none !important;
+	opacity: 0 !important;
+	visibility: hidden !important;
+	transition:
+		opacity 200ms linear,
+		visibility 0s linear 200ms !important;
+}
+
+.show {
+	opacity: 1 !important;
+	visibility: visible !important;
+	transition: opacity 200ms linear !important;
 }
 
 article {