body {
	background-color: #e6ffff;
	text-align: center;
	margin: 0 auto;
	font-family: Courier;
	width: 640px;
}

div.pixel {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #000000;
}
/* Row 1 */
div#r1c1 { animation: pixel1 4s;  background-color: blue; }
div#r1c2 { animation: pixel2 4s;  background-color: orange; }
div#r1c3 { animation: pixel1 4s;  background-color: blue; }
div#r1c4 { animation: pixel3 4s;  background-color: orange; }
div#r1c5 { animation: pixel3 4s;  background-color: orange; }
div#r1c6 { animation: pixel5 4s;  background-color: orange; }
div#r1c7 { animation: pixel4 4s;  background-color: blue; }
div#r1c8 { animation: pixel2 4s;  background-color: orange; }


/* Row 2 */
div#r2c1 { animation: pixel5 4s;  background-color: blue; }
div#r2c2 { animation: pixel3 4s;  background-color: blue; }
div#r2c3 { animation: pixel2 4s;  background-color: blue; }
div#r2c4 { animation: pixel4 4s;  background-color: orange; }
div#r2c5 { animation: pixel1 4s;  background-color: orange; }
div#r2c6 { animation: pixel2 4s;  background-color: orange; }
div#r2c7 { animation: pixel4 4s;  background-color: orange; }
div#r2c8 { animation: pixel5 4s;  background-color: orange; }


/* Row 3 */
div#r3c1 { animation: pixel2 4s;  background-color: blue; }
div#r3c2 { animation: pixel5 4s;  background-color: orange; }
div#r3c3 { animation: pixel4 4s;  background-color: blue; }
div#r3c4 { animation: pixel1 4s;  background-color: orange; }
div#r3c5 { animation: pixel3 4s;  background-color: orange; }
div#r3c6 { animation: pixel5 4s;  background-color: orange; }
div#r3c7 { animation: pixel4 4s;  background-color: blue; }
div#r3c8 { animation: pixel2 4s;  background-color: orange; }


/* Row 4 */
div#r4c1 { animation: pixel1 4s;  background-color: orange; }
div#r4c2 { animation: pixel4 4s;  background-color: orange; }
div#r4c3 { animation: pixel3 4s;  background-color: orange; }
div#r4c4 { animation: pixel5 4s;  background-color: orange; }
div#r4c5 { animation: pixel4 4s;  background-color: orange; }
div#r4c6 { animation: pixel2 4s;  background-color: orange; }
div#r4c7 { animation: pixel4 4s;  background-color: orange; }
div#r4c8 { animation: pixel1 4s;  background-color: orange; }


/* Row 5*/
div#r5c1 { animation: pixel5 4s;  background-color: orange; }
div#r5c2 { animation: pixel2 4s;  background-color: orange; }
div#r5c3 { animation: pixel1 4s;  background-color: orange; }
div#r5c4 { animation: pixel4 4s;  background-color: chartreuse; }
div#r5c5 { animation: pixel3 4s;  background-color: orange; }
div#r5c6 { animation: pixel1 4s;  background-color: orange; }
div#r5c7 { animation: pixel2 4s;  background-color: orange; }
div#r5c8 { animation: pixel5 4s;  background-color: orange; }


/* Row 6 */
div#r6c1 { animation: pixel4 4s;  background-color: orange; }
div#r6c2 { animation: pixel2 4s;  background-color: orange; }
div#r6c3 { animation: pixel1 4s;  background-color: orange; }
div#r6c4 { animation: pixel4 4s;  background-color: chartreuse; }
div#r6c5 { animation: pixel5 4s;  background-color: orange; }
div#r6c6 { animation: pixel3 4s;  background-color: orange; }
div#r6c7 { animation: pixel2 4s;  background-color: orange; }
div#r6c8 { animation: pixel1 4s;  background-color: orange; }



/* Row 7 */
div#r7c1 { animation: pixel1 4s;  background-color: orange; }
div#r7c2 { animation: pixel2 4s;  background-color: orange; }
div#r7c3 { animation: pixel3 4s;  background-color: orange; }
div#r7c4 { animation: pixel4 4s;  background-color: chartreuse; }
div#r7c5 { animation: pixel5 4s;  background-color: chartreuse; }
div#r7c6 { animation: pixel1 4s;  background-color: orange; }
div#r7c7 { animation: pixel2 4s;  background-color: orange; }
div#r7c8 { animation: pixel3 4s;  background-color: orange; }




/* Row 8 */
div#r8c1 { animation: pixel1 4s;  background-color: orange; }
div#r8c2 { animation: pixel2 4s;  background-color: orange; }
div#r8c3 { animation: pixel4 4s;  background-color: orange; }
div#r8c4 { animation: pixel3 4s;  background-color: orange; }
div#r8c5 { animation: pixel5 4s;  background-color: orange; }
div#r8c6 { animation: pixel2 4s;  background-color: orange; }
div#r8c7 { animation: pixel3 4s;  background-color: orange; }
div#r8c8 { animation: pixel1 4s;  background-color: orange; }





@keyframes pixel1 {
	0%{background-color: blue;}
	45%{background-color: red;}
	72%{background-color: chocolate;}
}

@keyframes pixel2 {
	0%{background-color: violet;}
	45%{background-color: green;}
	72%{background-color: silver;}
}

@keyframes pixel3 {
	0%{background-color: orange;}
	45%{background-color: black;}
	72%{background-color: gold;}
}
@keyframes pixel4 {
	0%{background-color: green;}
	45%{background-color: coral;}
	72%{background-color: red;}
}
@keyframes pixel5 {
	0%{background-color: goldenrod;}
	45%{background-color: darkgrey;}
	72%{background-color: yellow;}
}