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 a “Read More – Read Less” button with JavaScript.
By Richard
/ September 15, 2021
How to Create a "Read More - Read Less" button with JavaScript. Step 1) Add HTML: <p>Lorem ipsum dolor sit...
Read More
How to create a Scroll indicator with CSS and JavaScript
By Richard
/ September 9, 2021
How to create a Scroll indicator with CSS and JavaScript Step 1) Add HTML: <div class="header"> <h2>Scroll Indicator</h2> <div...
Read More
How to Create Zooming Effect on Hover Using CSS
By Richard
/ September 3, 2021
How to Create Zooming Effect on Hover Using CSS Step 1: Adding HTML <h1>Zoom on Hover</h1> <p>Hover over the div...
Read More
How to Detect if CAPS LOCK is ON using JavaScript
By Richard
/ September 1, 2021
How to Detect if CAPS LOCK is ON inside an input field using JavaScript Step 1 : Create an input...
Read More
How to copy text to the clipboard with JavaScript
By Richard
/ August 27, 2021
How to copy text to the clipboard with JavaScript Step 1) Add HTML: <p>Click on the button to copy the...
Read More
How to Create a Responsive Checkout form with CSS
By Richard
/ August 25, 2021
How to Create a Responsive Checkout form with CSS Step 1 : Create a form in HTML <h2>Responsive Checkout Form...
Read More
How to create a Sticky Menu with CSS and JavaScript
By Richard
/ August 20, 2021
How to create a Sticky Menu with CSS and JavaScript Step 1) Add HTML: Create a navigation bar: <div...
Read More
How to Create Drop-down Menu in Navigation bar Using HTML and CSS
By Richard
/ August 18, 2021
How to Create Drop-down Menu in Navigation bar Using HTML and CSS Step 1) Adding HTML: <head> <meta name="viewport" content="width=device-width,...
Read More
How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
By Richard
/ August 10, 2021
Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very...
Read More
How to add form validation for empty input fields with JavaScript.
By Richard
/ August 4, 2021
How to add form validation for empty input fields with JavaScript. Step 1 : Create a Simple input field in...
Read More