Learn how to shake/wiggle an image and the text with CSS.

Let’s shake It!
Shake the Image and the text:
Step 1.
Add HTML
<div class="shakeAnimation">
<h1 class="shake">Shake it!</h1>
<div class="jelly"><img src="https://lenadesign.org/wp-content/uploads/2021/04/jelly.png"></div>
<div class="plate"></div>
</div>
Step 2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #f2e8cf;
height: 100vh;
}
.shakeAnimation {
position: relative;
}
.jelly {
position: relative;
}
.shake {
position: relative;
}
Style the plate:
.plate {
position: relative;
width:150px;
height: 5px;
border: 5px solid #000;
border-radius:20px;
top:-32px;
left:-5px;
z-index:1;
background-color: #ede7e3;
}
Add :hover selector:
.jelly:hover {
animation: shake 1s ease infinite;
}
.shake:hover {
animation: shake 1s ease infinite;
}
Step 3.
Add CSS Animation
@keyframes shake {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
To see the animation on the website go to: lenastanley.com
Enjoy coding!
Read also: