Typing animation.

1 files changed, 28 insertions, 4 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index e5c3187..c0ab191 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -197,7 +197,30 @@ pre::-webkit-scrollbar {
   display: none;
 }
 
-.cursor::after {
+.typewriter-1 {
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0 auto;
+  animation: typing 3s steps(40, end);
+  animation-delay: 0s;
+}
+
+.typewriter-2 {
+  overflow: hidden;
+  visibility: hidden;
+  white-space: nowrap;
+  margin: 0 auto;
+  animation: typing 3s steps(40, end);
+  animation-delay: 3s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes typing {
+  0% { width: 0; visibility: visible; }
+  100% { width: 100%; visibility: visible; }
+}
+
+.typewriter-2::after {
   filter: brightness(0.9);
   background-color: var(--main-fg-color);
   box-shadow: 0 0 1px var(--main-fg-color), 0 0 6px var(--main-fg-color);
@@ -207,11 +230,12 @@ pre::-webkit-scrollbar {
   height: 1.9rem;
   margin-left: -8px;
   animation: cursor-blink 1s steps(1, start) infinite;
+  animation-delay: 3.5s;
 }
 
 @keyframes cursor-blink {
-  50% {
-    visibility: hidden;
-  }
+  0% { visibility: visible; }
+  50% { visibility: hidden; }
+  100% { visibility: visible; }
 }