added animations

2 files changed, 74 insertions, 1 deletions

diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 79100ffd..87a2da6a 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -104,6 +104,7 @@ a {
 a:hover {
     /* color: var(--text); */
     background: rgba(0, 0, 0, 0.1);
+    transition: background 0.5s
 }
 
 .github-img {
@@ -176,6 +177,7 @@ input {
 
 .filter-repos:hover {
   background: rgba(10, 10, 15, 0.5);
+  transition: background 0.5s
 }
 
 .repos {
@@ -234,6 +236,7 @@ h3 {
 .repo-list li:hover {
     /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
     background: rgba(0, 0, 0, 0.5);
+    transition: background 0.5s
 }
 
 .link-btn {
@@ -250,6 +253,7 @@ h3 {
     background: rgba(22, 136, 240, 0.5);
     border: 2px solid var(--text);
     transform: scale(1.1);
+    transition: background 0.5s, transform 0.3s, border 0.5s;
 }
 
 .repo-list p {
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 {