Learn How to Shake/Wiggle an Image with CSS

HTML Code (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Learn how to create a fun shake or wiggle effect on an image using CSS. This simple tutorial shows you how to add interactive animations to your images with pure CSS.">
    <meta name="keywords" content="CSS animations, image shake effect, CSS hover effect, CSS wiggle effect, CSS tutorial, interactive CSS, image animation, CSS tricks, web design, hover animation">
    <meta name="author" content="Your Name">
    <meta property="og:title" content="How to Shake/Wiggle an Image with CSS - Interactive CSS Animations">
    <meta property="og:description" content="Learn how to create a fun shake or wiggle effect on an image using CSS. This simple tutorial shows you how to add interactive animations to your images with pure CSS.">
    <meta property="og:image" content="image.jpg">
    <meta property="og:url" content="yourwebsite.com">
    <meta name="twitter:title" content="How to Shake/Wiggle an Image with CSS">
    <meta name="twitter:description" content="Create a fun shake or wiggle effect with CSS animations in this easy tutorial. Learn how to add interactivity to your images.">
    <meta name="twitter:image" content="image.jpg">
    <meta name="twitter:card" content="summary_large_image">
    <title>How to Shake/Wiggle an Image with CSS - Interactive CSS Animations</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Shake or Wiggle Your Image with CSS</h1>
    <p>Hover over the image below to see the shake effect:</p>
    <img src="pineapple.jpg" alt="Pineapple" class="shaking-image" width="300" height="300">

</body>
</html>

CSS Code (style.css):

/* Base style for the image */
.shaking-image {
    transition: transform 0.5s ease;
}

/* Hover effect: image will shake when hovered */
.shaking-image:hover {
    animation: shake 0.5s infinite;
}

/* Define the shake keyframes */
@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); }
}

Explanation:

HTML Code (index.html):
- The HTML file includes the meta tags for SEO, as well as the structure for the page.
- The image <img> element will trigger the CSS animation on hover.
- The link tag points to the external style.css file for styling.
CSS Code (style.css):
- The .shaking-image class is applied to the image to enable the shake animation.
- The @keyframes rule defines the shaking effect, using transformations (translate and rotate).
- The hover pseudo-class triggers the animation when the user hovers over the image.

How it Works:

When you hover over the image, the shake animation is applied, causing the image to move in a wiggling pattern continuously until the mouse is no longer hovering over it.
The animation-iteration-count: infinite; ensures the animation repeats as long as the user hovers over the image.

Learn How to Shake/Wiggle an Image with CSS

HTML Code (index.html):

CSS Code (style.css):

Explanation:

How it Works:

Leave a Reply Cancel reply