Add CSS Powered Animated Color Changing Background In Blogger

Add CSS Powered Animated Color Changing Background In Blogger

0
data:blog.title
CSS trick

Most of the Blogger template we use separate background for make little unique. Some Blogger use relevant background for matching their template. Like tech base, tutorial based background. But using background your site will delay to load. If you use image with higher resolution then it will also take extra time to load full template. But by using CSS background we can make our site faster and beautiful. 

Recommended: 

However I have already shared CSS patter for using instead background image.  But this is the little bit different. To create animation I will use 4 keyframes thus it can change one by one. In output we will see like animation. I mean random color changing in template background.


Before proceed you have to change your previous background. If you use any image then you should remove that first. Removing image background is very easy. For example purpose you can get the background image from below script. Here the bold color code and image can be directly delete.

body{background:#D8D8D8 url(http://2.bp.blogspot.com/-Cbz-Y1ezxB0/USDif0nOx4I/AAAAAAAAIcw/xpk2AZufA_U/s1600/bg.png) repeat fixed top center;margin:0;padding:0;color:#333333;font:x-small Georgia Serif;font-size/* */:/**/small;font-size:/**/small;text-align:center;}

This is just illustration in your template it may be different. But also remove background:#D8D8D8 color also if you have already added. After removing current background color and image Just follow the below steps to add this amazing effect on your Blogger template.


changing background demo


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML->

Step 3
 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Copy and Paste below code above/before </b:skin>
 
body {
animation: colorBackground 22s infinite; 
-webkit-animation: colorBackground 22s infinite; 
-moz-animation: colorBackground 22s infinite; 
-o-animation: colorBackground 22s infinite; 
}

@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}

Customization

  • To change the loading delay alter 22s with 30s or more, More seconds means it will take more time to load next background color.
  • To change the background colors just alter the color code. You can get color code from our Color Picker.

Step 5 hit the Save template button.

And check your Blogger template to see the effect. There are different colors are changing behind your Blogger template.  It seems to you just like a rainbow at the back. I hope you and your visitors will love it. And for more tutorials stay tune. 
Add CSS Powered Animated Color Changing Background In Blogger
4 Stars stars - "Add CSS Powered Animated Color Changing Background In Blogger" M ost of the Blogger template we use separate background for make little unique. Some Blogger u...
Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *