From fc92f5af1c5650e1f247449398fc6b26ac215f7c Mon Sep 17 00:00:00 2001
From: littleblack111 <littleblack11111@gmail.com>
Date: Mon, 2 Oct 2023 20:22:49 +0800
Subject: added animations

---
 src/css/style.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

(limited to 'src/css/style.css')

diff --git a/src/css/style.css b/src/css/style.css
index a313b77e..e18f2a68 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -34,6 +34,74 @@ body {
     left: 0;
 }
 
+/* animation ============================================== */
+
+@keyframes slideInTop {
+  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);
+  }
+}
+/* animation: name duration timing-function delay iteration-count direction fill-mode; */
+
+
+/* animate class */
+.animate {
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+}
+
+.animate.animate--infinite {
+  animation-iteration-count: infinite;
+}
+
+.animate.animation--delay-1s {
+  animation-delay: 1s;
+}
+.animate.animation--delay-p5s {
+  animation-delay: 0.5s;
+}
+.animate.animation--delay-p3s {
+  animation-delay: 0.3s;
+}
+
+.animate.animation--fast {
+  animation-duration: 0.3s;
+}
+
+.animate.animation--slow {
+  animation-duration: 1s;
+}
+
+.animate.slideInTop {
+  animation-name: slideInTop;
+  animation-timing-function: ease-in;
+}
+
+.animate.bounce {
+  animation-name: bounce;
+}
+
+/* transition */
+*:hover {
+  transition: all 0.3s
+}
+
+
 /* topbar styles ========================================== */
 
 header {
@@ -84,7 +152,8 @@ header {
 }
 
 .navBar a:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.2);
+  transition: background 1s
 }
 
 .navBar a.active::after {
-- 
cgit v1.2.3