From 4e98152859ce97d92b028c38eb7c53f3ca1620f6 Mon Sep 17 00:00:00 2001
From: Spedon <RealSped0n@outlook.com>
Date: Mon, 20 Mar 2023 21:57:14 +0800
Subject: [PATCH] optimize animation

---
 assets/css/_partial/_image.scss | 46 +++++++++++++--------------------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/assets/css/_partial/_image.scss b/assets/css/_partial/_image.scss
index 4df8efb..0ffc726 100644
--- a/assets/css/_partial/_image.scss
+++ b/assets/css/_partial/_image.scss
@@ -5,10 +5,9 @@
   opacity: 1;
   display: flex;
   align-items: center;
-  will-change: transform;
   
   img {
-    max-height: 55vmin;
+    max-height: 50vmin;
     max-width: 100vw;
     height: auto;
     width: auto;
@@ -16,62 +15,66 @@
   }
   
   &[data-status='t0'] {
-    transition: all 0.5s ease-in-out 1.5s;
+    transition: all 0.5s ease-in-out 0.6s;
     max-height: calc(100vh - var(--footer-height));
   
     img {
-      transition: all 0.5s ease-in-out 2s;
+      transition: all 0.5s ease-in-out 1.1s;
       max-height: calc(100vh - var(--footer-height));
     }
   }
   
   &[data-status='t1'] {
-    transition: opacity 0.5s ease-out 1s;
+    transition: all 0.2s ease-out 0.4s;
     opacity: 0;
+    margin-top: 30px;
   }
   
   &[data-status='t2'] {
-    transition: opacity 0.5s ease-out 0.75s;
+    transition: all 0.2s ease-out 0.3s;
     opacity: 0;
+    margin-top: 30px;
   }
   
   &[data-status='t3'] {
-    transition: opacity 0.5s ease-out 0.5s;
+    transition: all 0.2s ease-out 0.2s;
     opacity: 0;
+    margin-top: 30px;
   }
   
   &[data-status='t4'] {
-    transition: opacity 0.5s ease-out 0.25s;
+    transition: all 0.2s ease-out 0.1s;
     opacity: 0;
+    margin-top: 30px;
   }
   
   &[data-status='r0'] {
-    transition: all 0.5s ease-in-out 1s;
+    transition: all 0.5s ease-in-out 0.8s;
     opacity: 1;
   
     img {
-      transition: all 1s ease-in-out 0s;
-      max-height: 55vmin;
+      transition: all 0.8s ease-in-out 0s;
+      max-height: 50vmin;
     }
   }
   
   &[data-status='r1'] {
-    transition: opacity 0.25s ease-out 1.5s;
+    transition: all 0.2s ease-out 1.3s;
     opacity: 1;
   }
   
   &[data-status='r2'] {
-    transition: opacity 0.25s ease-out 1.75s;
+    transition: all 0.2s ease-out 1.4s;
     opacity: 1;
   }
   
   &[data-status='r3'] {
-    transition: opacity 0.25s ease-out 2s;
+    transition: all 0.2s ease-out 1.5s;
     opacity: 1;
   }
   
   &[data-status='r4'] {
-    transition: opacity 0.25s ease-out 2.25s;
+    transition: all 0.2s ease-out 1.6s;
     opacity: 1;
   }
   
@@ -94,17 +97,4 @@
   &#layer1 {
     z-index: 1;
   }
-}
-
-.images {
-  
-  img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    object-fit: contain;
-    max-height: 55vmin;
-    max-width: 100vw;
-    transform-origin: center;
-  }
 }
\ No newline at end of file