andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update shake-invalid-input.md

Browse Source
This commit is contained in:
Angelos Chalaris
2022-08-11 12:52:47 +03:00
committed by GitHub
parent 4a087aab09
commit 6cc6ee53da
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
snippets/shake-invalid-input.md
View File

@ -4,7 +4,6 @@ tags: animation
expertise: beginner expertise: beginner
cover: blog_images/perfect-timing.jpg cover: blog_images/perfect-timing.jpg
firstSeen: 2022-07-31T18:30:11+03:00 firstSeen: 2022-07-31T18:30:11+03:00
lastUpdated: 2022-07-31T18:30:11+03:00
--- ---
Creates a shake animation on invalid input. 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. - Use the `:invalid` pseudo-class to apply an `animation` to make the element shake.
```html ```html
<input type="text" placeholder="Accept Alphabets only" pattern="[A-Za-z]*"> <input type="text" placeholder="Letters only" pattern="[A-Za-z]*" />
``` ```
```css ```css
@keyframes shake { @keyframes shake {
0% {margin-left: 0rem;} 0% {
25% {margin-left: 0.5rem;} margin-left: 0rem;
75% {margin-left: -0.5rem;} }
100% {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; animation: shake 0.2s ease-in-out 0s 2;
box-shadow: 0 0 0.6em red; box-shadow: 0 0 0.6rem #ff0000;
} }
``` ```