chore: animate branding

1 files changed, 61 insertions, 0 deletions

diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index 325c673..773bf1d 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -75,3 +75,64 @@
     transform: translateY(0);
   }
 }
+
+@keyframes flip-logo {
+  0%,
+  85% {
+    transform: rotateY(180deg);
+  }
+
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+
+@keyframes branding-name-typing {
+  0%,
+  20% {
+    width: 100%;
+    visibility: visible;
+  }
+
+  100% {
+    width: 0;
+  }
+}
+
+@keyframes branding-job-typing {
+  0% {
+    width: 100%;
+    content: "";
+    visibility: visible;
+  }
+
+  48% {
+    content: "";
+  }
+
+  49% {
+    content: "|";
+  }
+
+  51% {
+    width: 100%;
+  }
+
+  70% {
+    width: 0;
+  }
+
+  100% {
+    width: 0;
+  }
+}
+
+@keyframes blink {
+  0% {
+    color: var(--color-primary-darker);
+  }
+
+  100% {
+    color: var(--color-bg-tertiary);
+  }
+}