Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS animation: shake Reply To: CSS animation: shake

#282153
Billy_MX
Participant

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!!