Creating an animation is sometimes considered vital for various projects. But loading your website with flash animations can make the load time for your webpage quite high! So, to avoid increasing your page load time and the time you spend in creating that flash animation, you can simply use CSS to implement a simple animation on your web page.
There are various advantages of using CSS to implement a simple animation, which include reducing the page load time, reducing your development time and various other things. Keeping all these in mind, I thought of sharing this simple tutorial with everyone on my blog. Well, here is the simple tutorial for you. For this tutorial, I would be using a pretty common cloud image, which suits pretty well for our animation. If you want, you can save this image from below and use it for this tutorial.
Let’s get started with the tutorial now.
The HTML Part
In this tutorial, I would just place the clouds image on a simple web page, which just has a heading on the top and an animated background behind it. For this, I would use the following markup.
<html> <head> <title>SlashCoding's Tutorial</title> </head> <body></pre> <div id="<span class=">myanimation"></div> <pre> <h1>Hello World!</h1> </div> </body> </html>
I just specified a heading tag and a div tag, with the class myanimation. I will now do some CSS on this HTML code to make it look as I want it.
The CSS Part
I created a new CSS file and in that, defined the basic style for my page.
body{
background-color:#FFFFFF;
}
h1{
text-align:center;
color:#000000;
}
Now, for the div tag I created in the HTML, I would add the style. First, add the following lines of code to display the image on the screen.
div#myanimation{
height: 229px;
margin:0 auto;
background-image: url(clouds.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
}
Now, in order to add the animation, add the following lines of code to the CSS file.
@keyframes backAnimation {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-webkit-keyframes backAnimation {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-ms-keyframes backAnimation {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-moz-keyframes backAnimation {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
Now, the last step is to add the animation attribute to our div#myanimation styling. Add the following lines to that div.
animation: backAnimation 15s linear infinite; -ms-animation: backAnimation 15s linear infinite; -moz-animation: backAnimation 15s linear infinite; -webkit-animation: backAnimation 15s linear infinite;
So now, your complete CSS should look something like this.
This is the final output that I got from this tutorial.
Well, that’s it. Open your web page and you should be able to see the animation on your web page. If you want to control the speed of the motion of your animation, remember to edit the value in all the forms of animation (browser specific). I hope this tutorial helped you create something useful! If you want, you can download the entire code from below here.
Download Source Code
Also, you can follow us on Twitter, like our Facebook page or subscribe to our updates via RSS Feeds.
