Today I'm going to show you another animation from CSS3 Keyframes. We are going to swing an image. First find a suitable image like this.


Now type the HTML Code.
< img id="swing_image" src="images/tarzan.png" />

Next type the codes given below in your CSS Sheet.

@keyframes swinging {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg)
}
100% {
transform: rotate(10deg);
}
}

swinging is the name of your animation. % represents the timeline of your animation. transform property and rotate value helps us to mark the swinging gaps, edges or the degrees of the image. Now add this code to your CSS Sheet.


#swing_image {
transform-origin: 50% 0;
animation: swinging 3s ease-in-out forwards infinite;
}

Now you have connected above two codes togeather. You have defined the animation name as "swinging". 3s means the speed or duration of the animation. The animation will start from 0s and end exactly at 3s.

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

Take a look at the results...


You can change the duration time if you want. For example take a look at the two images given below. I have set the first image to 1s and second image to 10s.

You can break the timeline into several parts if you want. In the above code I have break it into 0%, 50%, & 100%. But you can break it into any measurement you want. For example, take a look at the following codes & the output results.

Now you can use these codes for new designs. It may be diffrent according to your user inrerface. Click on the link given below and take a look at the logo of the website. This was created by me, long time ago...

www.sakurarestaurant.lk

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