Making website background animations so that they can change colors is currently very easy to implement, of course with the presence of CSS3, especially the animation feature in CSS3, it is increasingly possible to make this quickly.

Website background that changes can attract the attention of website visitors, of course it can be used to support the appearance of the website if it is used on the right website and with the use / placement of interesting animations.

website background animation

This time Tutorial-Webdesign.com will give a short tutorial on how to change the website background color with the help of css animation.

Related article:

Creating a Full Background Website
Tutorial on Creating Responsive Web Portfolio Using HTML5, CSS3 and Jquery
Creating HTML Structure
In this demo there is no special html tag, because we will only focus on the background

Indonesian Web Design Tutorial

there it appears that we will only display the words “Web Design Tutorial Indonesia”

Animating Effects With CSS
To make the background change color, we need the animation feature from CSS3, like this code

body{
background-color: #f1c40f;
-webkit-animation: color 5s ease-in 0s infinite alternate running;
-moz-animation: color 5s linear 0s infinite alternate running;
animation: color 5s linear 0s infinite alternate running;
}

/* Animation + Prefix for the browser */
@-webkit-keyframes color {
0% { background-color: #f1c40f; }
32% { background-color: #e74c3c; }
55% { background-color: #9b59b6; }
76% { background-color: #16a085; }
100% { background-color: #2ecc71; }
}
@-moz-keyframes color {
0% { background-color: #f1c40f; }
32% { background-color: #e74c3c; }
55% { background-color: #9b59b6; }
76% { background-color: #16a085; }
100% { background-color: #2ecc71; }
}
@keyframes color {
0% { background-color: #f1c40f; }
32% { background-color: #e74c3c; }
55% { background-color: #9b59b6; }
76% { background-color: #16a085; }
100% { background-color: #2ecc71; }
}
There it appears that the animation will be carried out for 5 seconds by making changes to the background in 5 stages and will be repeated continuously with the infinite command.

Results

You can see and download what we have made with the link below

DEMO | DOWNLOAD
so much

Hopefully this short article can be useful for you in learning the features in CSS3

Greetings Web Design & Development Indonesia