How to make an image jiggle using CSS

Hello!  In this tutorial, we will learn how to make an image jiggle using CSS effects.

Before moving ahead, I assume you have knowledge about HTML.

An object jiggles when it moves up and down or side to side simultaneously.

I am using Sublime Text for editing the HTML and CSS code. You may use any text editor of your wish.

Jiggle effect using CSS

Now, let us begin the tutorial.

First of all, we are going to write the HTML code.

<!DOCTYPE html>
<html>
<head>
  <title> Intern Project </title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="jiggle_image.css">
</head>
<body>
  <p> Hover over the image to make it jiggle :</p>
  <img src="xyz.jpg" alt="random lego minions" width="300" height="300">

</body>
</html>

In the first line, we use the <!DOCTYPE> tag to inform the browser about the version of HTML used in the document. Here in our case, we are using HTML5.

Next, we will include the <html> tag, <head> tag and the <body> tag. The <head> tag contains the <title> tag and <meta> tag . The HTML <meta> tag provides the metadata about the HTML document.

The <head> tag also contains the <link> tag which links a CSS file to design our plain HTML page. <body> tag is the main portion that contains the data shown on the webpage.

Here in the above case, we are using Paragraph(<p>)  Tag. Next, we include the image to which we have to apply the jiggling effect. <img> tag is used to complete this task. Set the height and width of the image. Use the alt attribute to add alternative text for the image.

Close the <body> and <html> tag. And save the file with .html extension.

Now let’s add the jiggling effect to the image using CSS.

img:hover{
  animation: jiggle 0.5s;
  animation-iteration-count: infinite;
}


@keyframes jiggle
{
  0% 
  {
    transform: translate(1px, 1px) rotate(0deg); 
  }
  10% 
  { 
  	transform: translate(-1px, -2px) rotate(-1deg); 
  }
  20% 
  { 
  	transform: translate(-3px, 0px) rotate(1deg); 
  }
  30% 
  { 
  	transform: translate(3px, 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(3px, 1px) rotate(-1deg);
  }
  80% 
  { 
  	transform: translate(-1px, -1px) rotate(1deg); 
  }
  90% 
  { 
  	transform: translate(1px, 2px) rotate(0deg); 
  }
  100% 
  { 
  	transform: translate(1px, -2px) rotate(-1deg); 
  }
}

Now, we design the image using the syntax used above.

In our case, the :hover is selecting the <img> tag.

Next, we use animation and animation-iteration-count properties.

Now, we create a keyframe jiggle to add a jiggling effect with a delay of 0.5 seconds and the animation-iteration-count is set to infinite.

The @keyframe rule specifies the animation code.

We specify the changes in percents (from 0% to 100% or use “from”  and “to”).

For each and every change we use transform property with translate() method.

The translate() method takes the values as the horizontal and vertical directions. The values have units as pixels.

We use the rotate() method and provide it the angle of rotation. It rotates clockwise if the angle is positive and counter-clockwise if the angle is negative.

I hope you enjoyed the post and it helped you.

Thank You

Also read, Rotate an image on mouse hover with CSS

One response to “How to make an image jiggle using CSS”

  1. Novel Malla says:

    Hi sir, really good blog, learnt something new. Sir can you please tell us what if the object moves diagonally?

Leave a Reply

Your email address will not be published. Required fields are marked *