Today we are going to use a CSS Keyframe with a "Waving" Effect. We can use the same codes that we have used in the previous article. All we have to do is change the values of "Transform" Property a little bit. Hence this is not a "Swing" effect like in our previous article, we can reduce the values or degrees of "Transform" property.

First of all, we need a suitable image. It can be a human, An animal or lifeless/physical object. This is my selected image.
I will target the penguin on the left side for this scenario. In this case, we have to separate his hand from his body. Like this...


Now we can write the HTML code like this.
< img src="hand.png" id="hand" >
< img src="main_image.png" id="main_image" />

hand is the Hand of the penguin in the left side. main_image is the Group image of penguins.

Next, we have to set the positions of both images as Absolute & give coordinations from using Top, Left properties in CSS. Please follow the below CSS codes. It can be different, when it comes to your selected image & your scenario.

#main_image {
left: 4%;
position: absolute;
z-index: 5000;
}
#hand {
left: 8.3%;
top: 183px;
position: absolute;
}
Now add the codes given below to your CSS. Remember to keep the previous codes as well. Then enjoy the animation !
#hand {
animation: wave 0.2s alternate infinite;
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(10deg);
}
}

wave is the name of your animation. % represents the timeline of your animation. transform property and rotate value helps us to mark the waving gaps, edges or the degrees of the image. According to above code, the hand will start to rotate from 0 degrees & ends from 10 degrees.

According to animation: wave 0.2s alternate infinite line, The duration of the animation is 0.2 seconds. You can increase or decrease the number to change the speed.

We can make the animation as a loop from using infinite. If you remove infinate and add numeric 2, then the hand will wave only 2 times (The animation will stop after 2 times). If you put 100, then the hand will wave(animate) 100 times. Not 101.

alternate is an animation direction value. The meaning of this value is that the animation is played forwards first, then backwards.

When you write CSS Keyframe codes, make sure to add the Vendor Prefixed as well. Or else these animations might not work properly or not work in other web browsers. For examples ;
-webkit-animation: wave 0.2s alternate infinite;
-moz-animation: wave 0.2s alternate infinite;
-o-animation: wave 0.2s alternate infinite;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);

















But when it comes to the mobile version, it will become a mess. You can hide this in the mobile version by using display:none or you can change the above values for mobile version by writing some CSS Media Queries.

By : Danula Randika Wickramaarachchi
From : Sri Lanka
Published Date : 2019.04.30