Implement Background Changing Animation using CSS

CSS is a very powerful language and one who knows it in depth could be making the WEB a very better place. As you know HTML is the base structure of any website, using it you can structure elements the way you to display them but CSS beautifies the code. It gives a new level of viewing angles and helps you to make more out of your website.

If you are an old reader of this blog then you know how design has evolved on this blog, I personally design everything, I have not hired anyone and even I have not learnt this language or did any course, but learning CSS was so east that I just got hold of it while looking at other blogs and yes Google Chrome’s Inspect Element helped me alot and I usually work using it to make my site look more nice.

• Automatically Change Background Color on Refresh in Blogger

I have earlier posted many nice tutorials like designing your Ordered List using CSS and even protecting your content by implementing a CSS code that stops the selection feature.

Remember Always make sure to Minify your CSS code to space space and decrease the size of your code. You can use our CSS Minifier Tool for this JOB, its fast and instant. For more advanced option you can use the other tool.

Today we have another nice tutorial that will help you in changing your background color of any element your site or blog to a different one with nice animation, like you have seen I have implemented this on my blog. You can see the background color changing here.

So now as you have seen the body color changing example, its time to show you how you can actually implement this awesome technique and animate background of any element in blogger.

How to Change Background Color of Blogger Elements using CSS Animation

So below are the steps involved in getting this trick to work, well these CSS tutorials will work on any other blog like Wordpress or so and even on any static or dynamic websites, you just need to have some basic knowledge on implementing this.

1. Open Blogger > Template > Edit HTML.
2. Now you need to search for the element ID you need to apply this effect or CSS animation on.
3. As you can see I added this effect on my #header-wrapper thing, so that started to change colors.
4. Now ID’s won’t be same for every template, you might have some different ID on your personal blog template.
5. Like you can take example for the body option. If you want to change the background color of your blog using this CSS animation technique then check below.
6. Press Ctrl + F and search ]]></b:skin> tag and paste below code above this tag.

   body{animation:colorchange 30s infinite;-webkit-animation:colorchange 30s infinite}@keyframes colorchange{5%{background:red}25%{background:yellow}50%{background:blue}75%{background:green}100%{background:red}}@-webkit-keyframes colorchange{5%{background:red}25%{background:yellow}50%{background:blue}75%{background:green}100%{background:red}}

7. Now there are few things you can change to suit your site;s design, like the numbers above in blue color is the time taken to shift to a new color, you can decrease or increase that.
8. I have also mentioned all the colors above, you can change those to a new one, you can also use the HEX codes or RGB codes.
9. After you have made all the changes you can Save your Template and then refresh your blog to see that awesome animation making changes to background color.

---

So guys this ends this another awesome colorful tutorial of changing your background colors with animation using the CSS only, this won;t increase your blogs loading time but give your blog a nice look.