From 4a087aab094193cea3e2455e726360bf6021b3ce Mon Sep 17 00:00:00 2001
From: Isabelle Viktoria Maciohsek <ivmaciohsek@gmail.com>
Date: Sun, 31 Jul 2022 18:31:22 +0300
Subject: [PATCH] Add shake-invalid-input snippet

---
 snippets/shake-invalid-input.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 snippets/shake-invalid-input.md

diff --git a/snippets/shake-invalid-input.md b/snippets/shake-invalid-input.md
new file mode 100644
index 000000000..b5ef1341d
--- /dev/null
+++ b/snippets/shake-invalid-input.md
@@ -0,0 +1,33 @@
+---
+title: Shake on invalid input
+tags: animation
+expertise: beginner
+cover: blog_images/perfect-timing.jpg
+firstSeen: 2022-07-31T18:30:11+03:00
+lastUpdated: 2022-07-31T18:30:11+03:00
+---
+
+Creates a shake animation on invalid input.
+
+- Use the `pattern` attribute to define the regular expression which the input's value must match.
+- Use `@keyframes` to define a shake animation, using the `margin-left` property.
+- Use the `:invalid` pseudo-class to apply an `animation` to make the element shake.
+
+```html
+ <input type="text" placeholder="Accept Alphabets only" pattern="[A-Za-z]*">
+```
+
+```css
+@keyframes shake {
+  0% {margin-left: 0rem;}
+  25% {margin-left: 0.5rem;}
+  75% {margin-left: -0.5rem;}
+  100% {margin-left: 0rem;}
+}
+
+input:invalid
+{
+  animation: shake 0.2s ease-in-out 0s 2;
+  box-shadow: 0 0 0.6em red;
+}
+```