Animated Colour changing Background for Blogger

Unknown

Friday, 31 January 2014

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. 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.

Adding the code

Now we have to add the animation codes in the blog template. For this paste the below given code just above.

/* Widget By 24-Tips.BlogSpot.Com */

.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; }
 }

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.