Home › Forums › CSS › CSS animation: shake › Reply To: CSS animation: shake
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!!