diff --git a/snippets/shake-invalid-input.md b/snippets/shake-invalid-input.md
index b5ef1341d..bab544311 100644
--- a/snippets/shake-invalid-input.md
+++ b/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
-
+
```
```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;
}
```