Blogger Animated Color Changing Background

Have you seen some website are using animated backgrounds or backgrounds with image, Today we i will teach you how to create how to create an animated background using keyframes CSS.

The tips to add this animated background in your blog you need to follow the steps below to add this in your blog.

Step to add animated background.

To add this effect you need to find </b:skin> in your blogger template, after finding it just add the below code inside it or you can use <style> code to add.

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 this you can change the color according to you as this is a demo color. The next step is to add <div> code you need to add this below the <body> of your template.