Beautiful Animated Background Color Css For Your Website

Hi friends I am back with Animated Background Color CSS. You might see this on some websites. That when anyone visits a site its background color starts changing. And It looks nice. If you are looking for something like that then you found it. Because in this post I will give background color changing CSS for your website.

To make this animated Background we are not going to use JS, JQ. We can make it by using CSS3. If You are using Blogger and want to know how to add animated Background color in Blogger. Then follow the below steps.

Add Animated Background Color Changing CSS In Blogger

1. Go to the blogger.com and log in your account.
2. Select your blog where you wanna add animated Background Color CSS.
3. From your blog dashboard click on the template link.  
4. Now from the next page click on the Edit HTML Button. 
   
5. You will see your template code click anywhere on the code. 
   
6. And search ]]></b:skin> by pressing CTRL+F.
7. After finding the tag just paste the following code just before ]]></b:skin>.
8. Finally, click on the save template button. 

That's it you have added beautiful animated Background Color CSS. Visit your Blog and see the changes you have made in your template.

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: #6bd57e; color: #fff; }
     20% { background-color: #fbcf61; color: #fff;}
     40% { background-color: #ff6f6f; color: #fff; }
     60% { background-color: #0ed4c8; color: #fff; }
     80% { background-color: #57cff4; color: #fff; }
    100% { background-color: #fbcf61; color: #fff; }
}
@-webkit-keyframes colorBackground {
0% { background-color: #6bd57e; color: #fff; }
     20% { background-color: #fbcf61; color: #fff;}
     40% { background-color: #ff6f6f; color: #fff; }
     60% { background-color: #0ed4c8; color: #fff; }
     80% { background-color: #57cff4; color: #fff; }
    100% { background-color: #fbcf61; color: #fff; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #6bd57e; color: #fff; }
     20% { background-color: #fbcf61; color: #fff;}
     40% { background-color: #ff6f6f; color: #fff; }
     60% { background-color: #0ed4c8; color: #fff; }
     80% { background-color: #57cff4; color: #fff; }
    100% { background-color: #fbcf61; color: #fff; }
}
@-o-keyframes colorBackground {
     0% { background-color: #6bd57e; color: #fff; }
     20% { background-color: #fbcf61; color: #fff;}
     40% { background-color: #ff6f6f; color: #fff; }
     60% { background-color: #0ed4c8; color: #fff; }
     80% { background-color: #57cff4; color: #fff; }
    100% { background-color: #fbcf61; color: #fff; }
}

That's it thanks for reading my this post and keep visiting for more useful posts. If you have any question about this post feel free to ask me by dropping your comment below.