✨ [css] Add typewriter animation

Author: AlsoKnownAs-Ax

snippets/css/animations/typewriter-animation.md

@@ -0,0 +1,50 @@
+---
+title: Typewriter Animation
+description: Adds a typewriter animation + blinking cursor
+author: AlsoKnownAs-Ax
+tags: css,animation
+---
+
+```html
+    <div class="typewriter">
+      <div>
+          <p>Typerwriter Animation</p>
+      </div>
+    </div>
+```
+
+```css
+    .typewriter{
+        display: flex;
+        justify-content: center;
+    }
+
+    .typewriter p {
+        overflow: hidden;
+        font-size: 1.5rem;
+        font-family: monospace;
+        border-right: 1px solid;
+        margin-inline: auto;
+        white-space: nowrap;
+        /* Steps: number of chars (better to set directly in js)*/
+        animation: typing 3s steps(21) forwards,
+        blink 1s step-end infinite;
+    }
+
+    @keyframes typing{
+        from{
+            width: 0%
+        }
+        f
+
+        to{
+            width: 100%
+        }
+    }
+
+    @keyframes blink{
+        50%{
+            border-color: transparent;
+        }
+    }
+```