Input by Creatlydev

1.input {
2  max-width: 190px;
3  padding: 12px;
4  border: none;
5  border-radius: 4px;
6  box-shadow: 2px 2px 7px 0 rgb(0, 0, 0, 0.2);
7  outline: none;
8  color: dimgray;
9}
10
11.input:invalid {
12  animation: justshake 0.3s forwards;
13  color: red;
14}
15
16@keyframes justshake {
17  25% {
18    transform: rotate(5deg);
19  }
20
21  50% {
22    transform: rotate(-5deg);
23  }
24
25  75% {
26    transform: rotate(5deg);
27  }
28}