Shake effect with CSS (shaking element)

In this article we are going to learn how to make a shake effect with CSS in a simple and easy way, so you can use this animation on your web page.

Hey you all programmers, ok? Let’s learn how to make an element shake with pure CSS!

First I will explain the idea behind the problem

We are going to use CSS animation, with the help of keyframes to map the shake effect.

That is, as far as it goes to the left and also to the right

Idea explained; let’s go to a practical example:

<div id="will-shake"></div>

Here we have the basic structure of an HTML, with a div of id will-shake, which is where we will execute the effect

And now the CSS needed to shake the element:

#will-shake {
/* div shape */
width: 100px;
height: 100px;
background-color: darkred;
/* animation*/
animation: shake .2s;
animation-iteration-count: 4;
}
/* keyframe configuring the animation */
@keyframes shake {
0% {margin-left: 0;}
25% {margin-left: 7px;}
50% {margin-left: 0;}
75% {margin-left: -7px;}
100% {margin-left: 0;}
}

First three lines were meant for div format so you can insert them as your element

Then we create the shake animation, with the animation rule, with a time of .2s, to give a faster effect when it shakes

You can enter any time here, but the faster the shake effect the better.

In the animation-iteration-count property we enter how many times the animation should occur, in this case 4

Finally, the keyframes, note that we determined that they are linked to the shaking animation, created earlier

We created 5 steps that move the element’s margins, throwing it from one side to the other at -7px and 7px, this will give the boundaries of where the element should shake

In this way creating a quick and harmonic effect

And this is how we create a quivering animation in HTML with just CSS! 🙂