Change theme background color using CSS tutorial with example

Here is a nice tutorial and live example on changing the background of a website using CSS. It uses keyframes for making animation. Below you can find source code and demo of this tutorial.

CSS

 
body {
		background:#a40574;
		animation: background 9s infinite;
		-webkit-animation: background 9s infinite;
		-moz-animation: background 9s infinite;
		-ms-animation: background 9s infinite;
		-o-animation: background 9s infinite;
	}
	h1{
		color:#fff;
	}
	.title {
		font-weight: 300;
		color:#fff;
		font-size:90px;
		width:200px;
		margin: 0 auto;
	}
	@keyframes background {
		0%{background:#a40574;}
		20%{background:#871f66;}
		40%{background:#d11460;}
		60%{background:#af2fa1;}
		80%{background:#8c2faf;}
		90%{background:#5c2faf; color:#0E0202;}
		100%{background:#3c1c76; color:#150303;}
	}
	@-webkit-keyframes background {
		0%{background:#a40574;}
		20%{background:#871f66;}
		40%{background:#d11460;}
		60%{background:#af2fa1;}
		80%{background:#8c2faf;}
		90%{background:#5c2faf; color:#000;}
		100%{background:#3c1c76; color:#000;}
	}

HTML

 
 
<!doctype html>
<html lang="en-US" class="no-js">
<head>
</head>
 
<body class="home">
 
	<div class="container">
		<header id="header" class="header-home" role="banner">
			<a href="http://www.vishmax.com/" title="Vishmax.com" rel="home">
				<img src="http://www.vishmax.com/demos/images/logo-inner.png" alt="Logo" width="209" height="50" />
			</a>	
			<!-- nav -->
			<nav class="clearfix" role="navigation">
			<ul>
				<li><a href="http://www.vishmax.com/en/tag/examples/" title="">More <span>Demos</span> </a> </li>	
				<li><a href="http://www.vishmax.com/en/lab/" title="">Refer <span>V Labs</span> </a> </li>	
				<li><a href="http://www.vishmax.com/en/read/" title="">Read <span>V Blogs</span> </a> </li>	
			</ul>
			</nav>
			<!-- /nav -->			
		</header>
 
 
<div class="container"> <!-- container -->	
 
 
		<h1>Change background color with CSS Demo </h1>
 
 
			<p class="title">Hello...</p>
 
 
		<footer class="footer"><!-- .footer -->
			Created by <a href="http://www.vishmax.com/">Vishmax.com</a>
		</footer>
		<!-- /.footer -->
 
</div> <!-- /container -->	
 
</body>
</html>

Live Demo