How to shake an image using CSS Keyframe ?
In this article, we will see how to shake an image using CSS Keyframe, along with knowing the different properties used to shake the image, through the code example.
A shaking image or shivering effect on the image is used to make the website look more dynamic and attractive. This effect can be applied to images using @keyframes rules, which provides more control over the animation we want to perform on web pages.
Approach: Shake effect on the images can be created using HTML and CSS, first we will insert an image using the <img> tag in HTML, then we will use the @keyframes rule to specify the animation code.
HTML code: Using HTML we will insert an image to our web page.
index.html:
HTML
<!DOCTYPE html> < html > < head > < title >Shake image in CSS</ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < h1 >w3wiki</ h1 > < h3 > How to shake an image using CSS Keyframe </ h3 > < img src = "https://media.w3wiki.net/wp-content/uploads/20221117164353/gfg.jpeg" alt = "GFG_img" > </ body > </ html > |
CSS code: In this section of code, first we will set the height and width of the image, then to apply the shivering effect we will use the @keyframes rule, first, we will create an animation named Shake under the hover effect, then we will use transform property to rotate the image in clockwise and anti-clockwise direction alternatively. If we will hover over the image, the image will seem to be shaking. The following are the CSS properties that are utilized with their brief description:
- animation: It is used to apply animation on text, image, or any div or container.
- background-image: It is used to set the background of the webpage, here we have used the linear-gradient function to set the background of the webpage.
- keyframes: It is used to set animation on elements and we can change CSS styles from one set to another set.
- transform: It is used to rotate an element, we can set the degree to which we want to rotate the element.
styles.css:
CSS
body { padding : 10px 20px ; text-align : center ; background-image : linear-gradient(to right , rgba( 193 , 245 , 133 , 0 ), rgba( 91 , 251 , 77 , 0.903 )); } img { height : 50% ; width : 50% ; margin : auto ; } img:hover { animation: Shake 0.5 s linear infinite; } /*Using keyframes for shaking an image*/ @keyframes Shake { 0% { transform: rotate( 5 deg); } 25% { transform: rotate( -6 deg); } 50% { transform: rotate( 5 deg); } 75% { transform: rotate( -6 deg); } 100% { transform: rotate( 5 deg); } } |
Output: