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; } ```