CSS wiggle/shake effect [closed]

Question

The effect I am intend to do: -wiggle a few times and stop wiggling. Do this behaviour periodically until mouse is hover. -on hover, wiggle motion stops completely. -all transition are smooth out. I tried with -webkit-animation keyframes, but using -webkit-animation-timing-function to ease out the transition when the mouse is hovered didn t work. Also, i am lost on how to achieve the period motion of: wiggle, stop, and wiggle again. I would appreciate if you could point out in the right directions.

Answer 1

Try one of the following:

.class:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

or Add This to your Script : <link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>

And Add a class to the element you want to shake

Full Documentation here: https://elrumordelaluz.github.io/csshake/

Answer 2

Here is a simple wiggle animation that stops when you hover over it.

In order to achieve a delay between wiggles, you can just include an "empty chunk" of the animation... that is, a period during which nothing changes. In my example, nothing changes between the 0% and 80% mark, and the "wiggle" only occurs in the last 20% (which ends up coming out to half a second).

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

h1.wiggle {
  display: inline-block;
  animation: wiggle 2.5s infinite;
}

h1.wiggle:hover {
  animation: none;
}

<h1 class="wiggle">
  wiggle, wiggle
</h1>

Unfortunately, this doesn't account for "easing" back into the un-wiggled state if you hover over it mid-animation. Doing so might require a bit of JavaScript.