From 66dd74136b793c34e513f56a61c8f4aff218cbf9 Mon Sep 17 00:00:00 2001
From: Monochromish <79590499+Monochromish@users.noreply.github.com>
Date: Tue, 31 May 2022 21:26:33 +0530
Subject: [PATCH] Add Smooth Lyric Animation (#1094)

Adds an animation to the lyrics that makes them look more natural.
---
 src/renderer/style.less | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 61a10664..bf434bfb 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1680,7 +1680,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .lyric-line.active .verse.verse-active {
-  opacity: 1;
+  animation: lyricVerseAnimation 0.75s ease-in-out forwards;
 }
 
 .lyric-line:hover {
@@ -1703,10 +1703,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .lyric-line.active {
   --bgSpeed: 1s;
-  opacity: 1;
   transform: scale(1);
   /*background: var(--keyColor);*/
   transition: transform 0.2s var(--appleEase);
+  animation: lyricVerseAnimation 1s ease-in-out forwards;
 }
 
 .lyric-line:not(.active) {
@@ -1788,6 +1788,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: flex;
 }
 
+@keyframes lyricVerseAnimation {
+  0% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes lyricWaitingLine {
   0% {
     opacity: 0.25;