Shake Image through CSS

Anonymous User 556 20 Jul 2021

How to shake an Image through CSS?

Anonymous User

Software Developer Trainee

I am a content writter !

1 Answers

Ethan Karla 21 Jul 2021

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!

forum

Shake Image through CSS

Can you answer this question?

1 Answers