Learn how to shake/wiggle an image with CSS.
Step 1 : Adding HTML – Giving image path
<h2> Hover on the image</h2> <img src="https://image.freepik.com/free-photo/adorable-brown-white-basenji-dog-smiling-giving-high-five-isolated-white_346278-1657.jpg" alt="Pineapple" width="30%" height="30%">
Step 2 : Adding Css
img:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
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); }
}Complete Code and Output with look like this :
How to shake/wiggle an image with CSS.
You may Also Like
How to Create Show Password Feature / Toggle Password Visibility using JavaScript
By Richard
/ June 15, 2021
How to Create Show Password Feature / Toggle Password Visibility using JavaScript Step 1) Add HTML: <p>Click the radio button...
Read More
How to Create Hover Tabs / change tabs on hover, with CSS and JavaScript
By Richard
/ June 8, 2021
How to Create Hover Tabs / change tabs on hover, with CSS and JavaScript Step 1) Add HTML: <h2>Hover Tabs</h2>...
Read More
How to Create Weight Converter using HTML and JavaScript
By Richard
/ June 7, 2021
How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound...
Read More
How to add Typing Effect / Type Writer Effect to your text Using JavaScript
By Richard
/ June 5, 2021
How to add Typing Effect / Type Writer Effect to your text Using JavaScript Step 1) Add HTML: <h1>Typewriter</h1>...
Read More
How to Create a full screen video background using HTML, CSS
By Richard
/ May 31, 2021
Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class="videobg"> <video src="https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4" loop muted...
Read More
How to Create 3 dots loading animation using css
By Richard
/ May 28, 2021
How to Create 3 dots loading animation using css Step 1 : Adding HTML <div class="dot1"> </div> <div class="dot2"></div> <div...
Read More
How to create a “To-do list” with HTML, CSS and JavaScript
By Richard
/ April 3, 2021
Learn How to create a "To-do list" with HTML, CSS and JavaScript Step 1) Add HTML: <div id="myDIV" class="header"> <h2...
Read More
How to create a Password Validation Form with CSS and JavaScript.
By Richard
/ April 2, 2021
How to create a Password Validation Form with CSS and JavaScript. Create A Form and apply Regex : Step 1)...
Read More
How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript
By Richard
/ March 22, 2021
How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript Step 1 : Adding HTML, Creating...
Read More
How to Create an Off-Canvas Menu / Side Bar Navigation
By Richard
/ March 20, 2021
How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn"...
Read More