Next, I'm trying to get a css effect, but I have no clue how to do this. The effect is "tremendous", when you click on an input for example, it trembles.
Being more detailed, the input is there, stopped. By clicking on it (onclick or onfocus) it gives a little tremble, but does not shake permanent, it shakes and soon stops.
How can I do this? Only css resolves?
I suppose I wanted something like this:
input:focus {
animation: treme 0.1s;
animation-iteration-count: 3;
}
@keyframes treme {
0% {margin-left: 0;}
25% {margin-left: 5px;}
50% {margin-left: 0;}
75% {margin-left: -5px;}
100% {margin-left: 0;}
}<input type="text"> Just use a css animation in :focus .
The vibration interval can be set by increasing the variation, in this case I use margin-left ranging from -5px to + 5px . Also, you can set the number of vibrations with animation-iteration-count .