CSS animation: shake

[Billy_MX]

Hi guys,
I’m trying to emulate the “Try EverWebinar” button movement on the top bar of this page:
https://www.growthmarketingpro.com/everwebinar-review-using-evergreen-webinars/

I already have something but it’s not working kind of the same (mine is shaking constantly). I’m looking to setup an infinite loop like this:
0.8s animation – pause 7s – 0.8s animation – pause 7S – [… and so on]

I hope you can help me!
Thanks!

Here are my CSS lines:

#myelement {
animation: shake .8s;
animation-iteration-count: infinite;
}

@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);
}
}

[Billy_MX]

I got it ;)
This solution works:

#myelement {
position: relative;
animation: shake 3.5s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}

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

6%, 26% {
transform: translate3d(2px, 0, 0);
}

10%, 16%, 23% {
transform: translate3d(-4px, -0.7px, 0);
}

13%, 20% {
transform: translate3d(4px, 0.7px, 0);

30% {
transform: translate3d(0, 0, 0);

}
}

**** Although it works, my movement is more a shake on the x and y axis (horizontal and vertical) while they are using a “Wiggle” effect that looks a little bit cleaner from my point of view (with a gravity center on the middle of their element). If anyone has a clue on how to set the keyframes to reproduce that Wiggle effect I would love to hear it.

Thanks!!

[Author]

Posts