From 0a1c847b4b369f37aadd8b04b613e764bd700cde Mon Sep 17 00:00:00 2001
From: pan93412 <pan93412@gmail.com>
Date: Sat, 23 Apr 2022 17:19:31 +0800
Subject: [PATCH] fix(views/lyrics): use `scale` to make animation smooth
 (#1554)

---
 src/views/lyrics.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index 3673231..431cc64 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -704,13 +704,13 @@ export default {
       span {
         opacity: 0.28;
         cursor: default;
-        font-size: 1em;
+        font-size: 0.8em;
         transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       }
 
       span.translation {
         opacity: 0.2;
-        font-size: 0.95em;
+        font-size: 0.75em;
       }
     }
 
@@ -722,15 +722,18 @@ export default {
       margin-top: 0.1em;
     }
 
+    .highlight {
+      transform-origin: center left;
+      transform: scale(1.05);
+    }
+
     .highlight span {
       opacity: 0.98;
       display: inline-block;
-      font-size: 1.25em;
     }
 
     .highlight span.translation {
       opacity: 0.65;
-      font-size: 1.1em;
     }
   }