Open In App

How to shake an image using CSS Keyframe ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to shake an image using CSS Keyframe, along with knowing the different properties used to shake the image, through the code example.

A shaking image or shivering effect on the image is used to make the website look more dynamic and attractive. This effect can be applied to images using @keyframes rules, which provides more control over the animation we want to perform on web pages. 

Approach: Shake effect on the images can be created using HTML and CSS, first we will insert an image using the <img> tag in HTML, then we will use the @keyframes rule to specify the animation code.

HTML code: Using HTML we will insert an image to our web page.

index.html:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Shake image in CSS</title>
    <link rel="stylesheet" 
          href="styles.css">
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
          How to shake an image using CSS Keyframe
      </h3>
    <img src=
         alt="GFG_img">
</body>
  
</html>


CSS code: In this section of code, first we will set the height and width of the image, then to apply the shivering effect we will use the @keyframes rule, first, we will create an animation named Shake under the hover effect, then we will use transform property to rotate the image in clockwise and anti-clockwise direction alternatively. If we will hover over the image, the image will seem to be shaking. The following are the CSS properties that are utilized with their brief description:

  • animation: It is used to apply animation on text, image, or any div or container.
  • background-image: It is used to set the background of the webpage, here we have used the linear-gradient function to set the background of the webpage.
  • keyframes: It is used to set animation on elements and we can change CSS styles from one set to another set.
  • transform: It is used to rotate an element, we can set the degree to which we want to rotate the element. 

styles.css:

CSS




body {
    padding: 10px 20px;
    text-align: center;
    background-image: linear-gradient(to right, rgba(193, 245, 133, 0), 
                                                  rgba(91, 251, 77, 0.903));
}
  
img {
    height: 50%;
    width: 50%;
    margin: auto;
}
  
img:hover {
    animation: Shake 0.5s linear infinite;
}
  
/*Using keyframes for shaking an image*/
@keyframes Shake {
    0% {
        transform: rotate(5deg);
    }
  
    25% {
        transform: rotate(-6deg);
    }
  
    50% {
        transform: rotate(5deg);
    }
  
    75% {
        transform: rotate(-6deg);
    }
  
    100% {
        transform: rotate(5deg);
    }
}


Output:



Last Updated : 25 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads