diff --git a/CustomApps/lyrics-plus/Pages.js b/CustomApps/lyrics-plus/Pages.js
index 98dbe44187..5f99b25156 100755
--- a/CustomApps/lyrics-plus/Pages.js
+++ b/CustomApps/lyrics-plus/Pages.js
@@ -70,6 +70,8 @@ const KaraokeLine = ({ text, isActive, position, startTime }) => {
 				className: `lyrics-lyricsContainer-Karaoke-Word${isWordActive ? " lyrics-lyricsContainer-Karaoke-WordActive" : ""}`,
 				style: {
 					"--word-duration": `${time}ms`,
+					// don't animate unless we have to
+					transition: !isWordActive ? "all 0s linear" : "",
 				},
 			},
 			word
diff --git a/CustomApps/lyrics-plus/style.css b/CustomApps/lyrics-plus/style.css
index 1a72252c3d..56f12b94ca 100644
--- a/CustomApps/lyrics-plus/style.css
+++ b/CustomApps/lyrics-plus/style.css
@@ -303,11 +303,23 @@ div.lyrics-tabBar-headerItemLink {
 
 .lyrics-lyricsContainer-Karaoke-WordActive {
 	color: var(--lyrics-color-active) !important;
+	background-position: top left !important;
 }
 
 .lyrics-lyricsContainer-Karaoke-Word {
 	color: var(--lyrics-color-inactive);
-	transition: var(--word-duration) color ease;
+	background-image: linear-gradient(to right,
+		var(--lyrics-color-active),
+		var(--lyrics-color-active) 45%,
+		var(--lyrics-color-inactive) 55%,
+		var(--lyrics-color-inactive));
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-size: 225% 100%;
+	background-position: top left 100%;
+	transition-property: color, background-position;
+	transition-duration: calc(var(--word-duration) + 0.05s);
+	transition-timing-function: linear;
 }
 
 .lyrics-lyricsContainer-LyricsLine a {