CSS Shake Animation - Lena Design

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

*to see the animation on the website click here.

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!

Share this: