How to do 'tremendous' effect with css

Asked

Viewed 3,408 times

3

Next, I’m looking to get a css effect but I have no idea how to do that. The effect is "tremendous", when you click on an input for example, it shakes.

Being more detailed, the input is there, stopped. By clicking on it (onclick or onfocus) it gives a little tremidinha, but does not shake permanent, it shakes and soon to.

How can I do that? Only css solves?

css

1 answer

3


I imagine you wished for 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 the :focus. The vibration range can be defined increased the variation, in case use the margin-left varying from -5px to +5px. Also, you can set the number of vibrations with the animation-iteration-count.

  • Damn, something so simple and I didn’t think of Animation... Thanks man!

  • @Gabrielmoodlight, you’re welcome ^.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.