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 >GeeksforGeeks</ h1 >
< h3 >
How to shake an image using CSS Keyframe
</ h3 >
< img src =
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;
}
@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:
Last Updated :
25 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...