Animasi background warna dengan keyframes

by dafin defandaky

HTML

<body>
<div class="dbd-background">
	<div class="about-me">
		<p>
			Animasi warna perubahan Background
		</p>
		DBD :]
	</div>
</div>
</body>

CSS

body {
    animation: colorBackground 20s infinite; 
     -webkit-animation: colorBackground 20s infinite; 
      -moz-animation: colorBackground 20s infinite; 
        -o-animation: colorBackground 20s infinite; 
}
.about-me {
	position: relative;
	top: 35%;
	background-color: #fff;
	padding: 20px;
	font-size: 50px;
	text-align: center;
	letter-spacing: 3px;
  line-height: 1.5;
}

.dbd-background .about-me p {
	padding: 0; 
	margin: 0 0 -15px 0;
	color: #777;
	font-size: 20px;
	text-transform: uppercase;
}
.dbd-background {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
}
@keyframes colorBackground {
      0% { background-color: #369; color: #363; }
     20% { background-color: #365; color: #366; }
     40% { background-color: #368; color: #355; }
     60% { background-color: #375; color: #345; }
     80% { background-color: #386; color: #399; }
    100% { background-color: #377; color: #367; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #369; color: #363; }
     20% { background-color: #365; color: #366; }
     40% { background-color: #368; color: #355; }
     60% { background-color: #375; color: #345; }
     80% { background-color: #386; color: #399; }
    100% { background-color: #377; color: #367; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #369; color: #363; }
     20% { background-color: #365; color: #366; }
     40% { background-color: #368; color: #355; }
     60% { background-color: #375; color: #345; }
     80% { background-color: #386; color: #399; }
    100% { background-color: #377; color: #367; }
}
@-o-keyframes colorBackground {
      0% { background-color: #369; color: #363; }
     20% { background-color: #365; color: #366; }
     40% { background-color: #368; color: #355; }
     60% { background-color: #375; color: #345; }
     80% { background-color: #386; color: #399; }
    100% { background-color: #377; color: #367; }
}