Today I am going to show you a wonderful CSS trick. It is a CSS Keyframe. We can create animations via CSS Keyframes and we will not need a single Javascript Code. CSS means Pure CSS !

From this article, I will show you how to animate a background image. We can animate the background image from 4 ways.
01. Left to Right
02. Right to Left
03. Top to Bottom
04. Bottom to Top

So we will need a suitable image for the background. First create a div. in your HTML file and define an ID.

< div id = "moving_background" > < /div >

Now copy and paste this code in your Style Sheet.

@keyframes animatedBackground {
from {
background-position: 0% 0%;
}
to {
background-position: 0% 100%;
}
}

animatedBackground is the animation name of this keyframe. From and To represents the starting and ending positions. First value represents the X latitude and second value represents the Y latitude. So you can see the ending position is set to 100%(from) and starting position is set to 0%(to). Second value means Y latitude. So the background image will animate from Bottom to Top. Next add the code given below.

#moving_background{
background-image: url(images/blog/bg_photo.jpg);
height: 400px;
animation: animatedBackground 20s linear infinite;
}

You have to give the path to the image (background-image), Define an appropriate height (height) and Finally the details about your CSS Keyframe. Now let's see how it looks.

animatedBackground means the name of the animation, that we have defined in the keyframe. 20s means the speed or duration of the animation. The animation will start from 0s and end exactly at 20s. You can change the duration time if you want. For example take a look at the two images given below. I have set the left side image to 5s and right side image to 35s.

We can make the animation as a loop from using "infinite". If you remove infinate and add numeric 2, then the background will animate only 2 times. The animation will stop after 2 times. If you put 100, then it will animate 100 times. Not 101. Now try this Keyframe.

@keyframes animatedBackground {
from {
background-position: 0% 100%;
}
to {
background-position: 0% 0%;
}
}

I have changed from and to values of Y latitude. Now the background image will animate from Top to Bottom.


Now you can add this methode to X latitude to animate the background image from Left to Right and Right to Left.

@keyframes animatedBackground {
from {
background-position: 0% 0%;
}
to {
background-position: 100% 0%;
}
}

@keyframes animatedBackground {
from {
background-position: 100% 0%;
}
to {
background-position: 0% 0%;
}
}

That is the basic interface. Now you can think wisely and create new concepts using this foundation. For example here is a Keyframe that I have designed for a website. I have placed a foreground image of Cold Baverages and reduced the opacity. Then I have placed a background image of Smoke and gave Right to Left movement.

Cool isn't it?

Yes! Very cool. But when it comes to tablet or mobile devices, it might be a mess. So it is better to use these keyframes only for the desktop version.


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