Shake Image through CSS

How to shake an Image through CSS?
Last updated:7/20/2021 1:12:46 AM

1 Answers

Ethan Karla
Ethan Karla

To achieve the shaking image through CSS, you can use transform property. 

Below code will help you to achieve this : 

<!DOCTYPE html>

<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        img:hover {
            animation: shake 0.5s;
            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);
            }
        }
    </style>
</head>
<body>
    <p>Hover over the image:</p>
    <img src='https://source.unsplash.com/600x600/?Technology,macbook' alt='Technology' width='300' height='300'>
</body>
</html>

Hope this information will be helpful for you.

Happy Coding!

Answer