Animated Colour changing Background for Blogger

Posted On // 11 comments
Changing Background
Animated Colour Changing Background for Blogger - Today I am going to teach you how you can make your background change to different colours with animation using keyframes CSS. Inspite of using big images you can use these CSS codes which load extremely fast and you the user too gets too see some interaction on the background.

The live demo of this design hack can be seen by click the button below.



Live Demo

The demo ofcourse looks awesome so in order to add this animated background in your blog/website follow the below steps.

Removing existing code


First of all you have to remove the existing background code to avoid any conflict in between and minimize excessive code. For this search the body selector from the CSS codes in your blog. Under that search for background property and remove the property with the value (Do Not Remove the Selector). In case you don't know what selector, property and values in CSS codes are refer to the below image.

 CSS Syntax 

Adding the code


Now we have to add the animation codes in the blog template. For this paste the below given code just above ]]></b:skin> <


body {
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}

@keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}

Code Source - Immam Vel

After adding the code, save the template. You are done now. Now you and your visitors can see this animated colour changing background in your blogger blog.

11 comments

Namit Author
30 December 2013 at 21:49

Hi Dhiraj, I just wanted to ask you that will a change of my blogger template affect my search rankings or traffic ?

Reply
30 December 2013 at 22:00

I don't know what other experts say but as far as I am concerned, my answer is No. Content is king and always will be. A template of a blog shows how it looks and how it works. Yes there might be slight change in rankings if you don't add crucial things like Meta tags in your new/updated template.

Reply
Namit Author
30 December 2013 at 22:06

Thank You Very Much Dhiraj

Reply
1 January 2014 at 13:04

I have done, thanks

Reply
2 January 2014 at 13:06

nice one dude

Reply
Subash Author
27 February 2014 at 16:48

Thank you very much,

Reply
Alvin Crew Author
14 March 2014 at 07:59

thanks for your tutorial worked 100%

Reply
23 June 2015 at 12:50

I read this article. I think You put a lot of effort to create this article. I appreciate your work..mayor of clarksville tn salary

Reply
John Arnold Author
3 February 2016 at 18:22

Well first of all Dhiraj thank you so much for this post and honestly I have no idea regarding this post earlier and the information that you have shared through it. For sure I am going to use it. Keep posting and keep growing.

Video Loops

Reply
11 August 2016 at 15:46


This is the best community for discission about any topics and sharing best ideas, knowledge and thought. and have great Article sharing platform. I like this concept. Thanks a lot of all.
techcommunitype
communityhstarusa
ocompe

Reply
John Mark Author
10 January 2017 at 15:03

I want to thank you for this great article. Its an informative and effective article. I also learning this your post. Now, i want to know about Background Removal Service. I hope, you will be published Background Removal related article.

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Animated Colour changing Background for Blogger |