Merge pull request #149 from AlsoKnownAs-Ax/feature/css-animations

[Feature - CSS] Feature/css animations

Author: Mathys-Gasnier

snippets/css/animations/blink-animation.md

@@ -0,0 +1,24 @@
+---
+title: Blink Animation
+description: Adds an infinite blinking animation to an element
+author: AlsoKnownAs-Ax
+tags: animation,blink,infinite
+---
+
+```css
+.blink {
+    animation: blink 1s linear infinite;
+}
+
+@keyframes blink{
+    0%{
+        opacity: 0;
+    }
+    50%{
+        opacity: 1;
+    }
+    100%{
+        opacity: 0;
+    }
+}
+```

snippets/css/animations/pulse-animation.md

@@ -0,0 +1,27 @@
+---
+title: Pulse Animation
+description: Adds a smooth pulsing animation with opacity and scale effects
+author: AlsoKnownAs-Ax
+tags: animation,pulse,pulse-scale
+---
+
+```css
+.pulse {
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+}
+```

snippets/css/animations/shake-animation.md

@@ -0,0 +1,27 @@
+---
+title: Shake Animation
+description: Adds a shake animation ( commonly used to mark invalid fields )
+author: AlsoKnownAs-Ax
+tags: shake,shake-horizontal
+---
+
+```css
+.shake {
+    animation: shake .5s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  50% {
+    transform: translateX(10px);
+  }
+  75% {
+    transform: translateX(-10px);
+  }
+}
+```

snippets/css/animations/slide-in-animation.md

@@ -0,0 +1,24 @@
+---
+title: Slide-in Animation
+description: Adds a slide-in from the right side of the screen
+author: AlsoKnownAs-Ax
+tags: animation,slide-in,slide-right
+---
+
+```css
+.slide-in {
+    animation: slide-in 1s ease-in-out;
+}
+
+@keyframes slide-in {
+    from {
+        scale: 300% 1;
+        translate: 150vw 0;
+    }
+
+    to {
+        scale: 100% 1;
+        translate: 0 0;
+    }
+}
+```

snippets/css/animations/typewriter-animation.md

@@ -0,0 +1,50 @@
+---
+title: Typewriter Animation
+description: Adds a typewriter animation + blinking cursor
+author: AlsoKnownAs-Ax
+tags: blinking,typewriter
+---
+
+```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;
+        /* The cursor will inherit the text's color by default */
+        /* border-color: red */                
+        /* 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%
+        }
+        to{
+            width: 100%
+        }
+    }
+
+    @keyframes blink{
+        50%{
+            border-color: transparent;
+        }
+    }
+```