added fadeIn, fadeOut, util class, added fadeZoomIn, fixed search become abs problem

1 files changed, 73 insertions, 42 deletions

diff --git a/src/css/style.css b/src/css/style.css
index 2a05f9f2..388e7848 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -65,59 +65,70 @@ body::-webkit-scrollbar {
 /* animation ============================================== */
 
 @keyframes slideInTop {
-from {
-    transform: translateY(-300px);
-}
-to {
-    transform: translateY(0);
-}
+    from {
+        transform: translateY(-300px);
+    }
+    to {
+        transform: translateY(0);
+    }
 }
 
 @keyframes bounce {
-0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0px);
-}
-40% {
-    transform: translateY(30px);
-}
-80% {
-    transform: translateY(-15px);
-}
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0px);
+    }
+    40% {
+        transform: translateY(30px);
+    }
+    80% {
+        transform: translateY(-15px);
+    }
 }
 
 @keyframes zoomIn {
-0% {
-    transform: scale(0.01);
-}
-85% {
-    transform: scale(1.1);
-}
-100% {
-    transform: scale(1);
-}
+    0% {
+        scale: 0.01;
+    }
+    65% {
+        scale: 1.05;
+    }
+    100% {
+        scale: 1;
+        position: relative;
+    }
 }
 
 @keyframes zoomOut {
-0% {
-    transform: scale(1);
-}
-100% {
-    transform: scale(0.01);
-}
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(0.01);
+    }
 }
 
-@keyframes reveal {
-0% {
-    -webkit-filter: blur(32px);
-    -moz-filter: blur(32px);
-    -o-filter: blur(32px);
-    -ms-filter: blur(32px);
-    filter: blur(32px);
-    -webkit-backdrop-filter: blur(32px);
-    backdrop-filter: blur(32px);
-    transform: scale(2);
+@keyframes fadeZoomIn {
+    from {
+        opacity: 0.35;
+        scale: 1.15;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
 }
 
+@keyframes reveal {
+    from {
+        -webkit-filter: blur(32px);
+        -moz-filter: blur(32px);
+        -o-filter: blur(32px);
+        -ms-filter: blur(32px);
+        filter: blur(32px);
+        -webkit-backdrop-filter: blur(32px);
+        backdrop-filter: blur(32px);
+        transform: scale(2);
+    }
 }
 
 @keyframes shake {
@@ -169,6 +180,8 @@ to {
     }
 }
 
+
+
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
@@ -231,7 +244,6 @@ to {
     transition-timing-function: linear;
     -webkit-animation-name: reveal;
     animation-name: zoomIn;
-    animation-name: zoomIn;
 }
 
 .animate.zoomOut {
@@ -242,7 +254,7 @@ to {
 }
 
 .animate.reveal {
-    animation-duration: 50ms;
+    animation-duration: 500ms;
     -webkit-transition-timing-function: linear;
     transition-timing-function: linear;
     -webkit-animation-name: reveal;
@@ -254,6 +266,25 @@ to {
     animation-name: shake;
 }
 
+.animate.fadeIn {
+    -webkit-animation-name: fadeIn;
+    animation-name: fadeIn;
+}
+
+.animate.fadeOut {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
+}
+
+.animate.fadeZoomIn {
+    -webkit-animation-name: fadeZoomIn;
+    animation-name: fadeZoomIn;
+}
+
+.aniamte.persist {
+    animation-fill-mode: forwards;
+}
+
 /* transition */
 /* * {
     -webkit-transition: all 0.3s;