Update shake-invalid-input.md

snippets/shake-invalid-input.md

@@ -4,7 +4,6 @@ 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.
@@ -14,20 +13,27 @@ Creates a shake animation on invalid input.
 - 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]*">
+ <input type="text" placeholder="Letters 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;}
+  0% {
+    margin-left: 0rem;
+  }
+  25% {
+    margin-left: 0.5rem;
+  }
+  75% {
+    margin-left: -0.5rem;
+  }
+  100% {
+    margin-left: 0rem;
+  }
 }
 
-input:invalid
-{
+input:invalid {
   animation: shake 0.2s ease-in-out 0s 2;
-  box-shadow: 0 0 0.6em red;
+  box-shadow: 0 0 0.6rem #ff0000;
 }
 ```