How To Create Image Shake or Wiggle Effect Using CSS Animation

  Jan 2024
  Category: CSS
How To Create Image Shake or Wiggle Effect Using CSS Animation

Welcome To ITSolutionsGuides,

Lets see How To Create Image Shake or Wiggle Effect Using CSS Animation using the it solutions guides tutorial. By using the animation:shake property of the css to shake or wiggle the image

Let's Start Coding

To shake or wiggle the image we should use the animation: shake; CSS property to shake or wiggle any image or div etc.

<!DOCTYPE html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    img:hover {
      animation: shake 2s;
      animation-iteration-count: infinite;

    @keyframes shake {
      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); }


  <p>Hover over the image to see the effects</p>
  <img src="" alt="ITSolutionsGuides" width="300"



We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Subscribe for NewsLetter

Be the first to know about releases and tutorial news and solutions.

We care about your data in our privacy policy.


ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.

Contact US

ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.

whatsapp  gmail  instagram-new--v1  facebook-circled  twitter-circled  linkedin  github  pinterest 

Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides