SmokeyTheSalmon · August 29, 2015 14:02
diff --git a/sator.html b/sator.html
 <!DOCTYPE html>
 <html>
 <head>
 <link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'><style>
 body {
 	-webkit-animation: backgroundcolors 3s infinite;
 	-moz-animation: backgroundcolors 3s infinite;
 	animation: backgroundcolors 3s infinite;
 	font-size: 60px;
 }
 table {
 	margin: 0 auto;
 	margin-top: 160px;
 }
 table tr {
 	-webkit-animation: colors 3s infinite;
 	-moz-animation: colors 3s infinite;
 	animation: colors 3s infinite;
 	font-family: 'Bitter', serif;
 	font-size: 60px;
 }
 table tr:nth-child(1) {
 	animation-delay:0.5s;
 	-webkit-animation-delay:0.5s; /* Safari and Chrome */
 }
 table tr:nth-child(2) {
 	animation-delay:1.25s;
 	-webkit-animation-delay:1.25s; /* Safari and Chrome */
 }
 table tr:nth-child(3) {
 	animation-delay:1.5s;
 	-webkit-animation-delay:1.5s; /* Safari and Chrome */
 }
 table tr:nth-child(4) {
 	animation-delay:1.75s;
 	-webkit-animation-delay:1.75s; /* Safari and Chrome */
 }
 table tr:nth-child(5) {
 	animation-delay:2s;
 	-webkit-animation-delay:2s; /* Safari and Chrome */
 }

 @keyframes colors {
    0% {
        color: #8A0E1E;
    }
    50% {
        color: #FF3300;
    }
    100% {
        color: yellow;
    }
 }
 @-moz-keyframes colors {
    0% {
        color: #8A0E1E;
    }
    50% {
        color: #FF3300;
    }
    100% {
        color: yellow;
    }
 }
 @-webkit-keyframes colors {
    0% {
        color: #8A0E1E;
    }
    50% {
        color: #FF3300;
    }
    100% {
        color: yellow;
    }
 }

 @keyframes backgroundcolors {
    0% {
        background: yellow;
    }
    50% {
        background: #33CCFF;
    }
    100% {
        background: #FF3300;
    }
 }

 @-webkit-keyframes backgroundcolors {
    0% {
        background: yellow;
    }
    50% {
        background: #33CCFF;
    }
    100% {
        background: #FF3300;
    }
 }

 </style>
 </head>

 <body>
 	<section class="table">
 		<table>
 			<!--It's a Sator Square. Don't worry about it.-->
 			<tr><th>S</th><th>A</th><th>T</th><th>O</th><th>R</th></tr>
 			<tr><th>A</th><th>R</th><th>E</th><th>P</th><th>O</th></tr>
 			<tr><th>T</th><th>E</th><th>N</th><th>E</th><th>T</th></tr>
 			<tr><th>O</th><th>P</th><th>E</th><th>R</th><th>A</th></tr>
 			<tr><th>R</th><th>O</th><th>T</th><th>A</th><th>S</th></tr>
 		</table>
 	</section>
 </body>

 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'><style>
	body {
	-webkit-animation: backgroundcolors 3s infinite;
	-moz-animation: backgroundcolors 3s infinite;
	animation: backgroundcolors 3s infinite;
	font-size: 60px;
	}
	table {
	margin: 0 auto;
	margin-top: 160px;
	}
	table tr {
	-webkit-animation: colors 3s infinite;
	-moz-animation: colors 3s infinite;
	animation: colors 3s infinite;
	font-family: 'Bitter', serif;
	font-size: 60px;
	}
	table tr:nth-child(1) {
	animation-delay:0.5s;
	-webkit-animation-delay:0.5s; /* Safari and Chrome */
	}
	table tr:nth-child(2) {
	animation-delay:1.25s;
	-webkit-animation-delay:1.25s; /* Safari and Chrome */
	}
	table tr:nth-child(3) {
	animation-delay:1.5s;
	-webkit-animation-delay:1.5s; /* Safari and Chrome */
	}
	table tr:nth-child(4) {
	animation-delay:1.75s;
	-webkit-animation-delay:1.75s; /* Safari and Chrome */
	}
	table tr:nth-child(5) {
	animation-delay:2s;
	-webkit-animation-delay:2s; /* Safari and Chrome */
	}

	@keyframes colors {
	0% {
	color: #8A0E1E;
	}
	50% {
	color: #FF3300;
	}
	100% {
	color: yellow;
	}
	}
	@-moz-keyframes colors {
	0% {
	color: #8A0E1E;
	}
	50% {
	color: #FF3300;
	}
	100% {
	color: yellow;
	}
	}
	@-webkit-keyframes colors {
	0% {
	color: #8A0E1E;
	}
	50% {
	color: #FF3300;
	}
	100% {
	color: yellow;
	}
	}

	@keyframes backgroundcolors {
	0% {
	background: yellow;
	}
	50% {
	background: #33CCFF;
	}
	100% {
	background: #FF3300;
	}
	}

	@-webkit-keyframes backgroundcolors {
	0% {
	background: yellow;
	}
	50% {
	background: #33CCFF;
	}
	100% {
	background: #FF3300;
	}
	}

	</style>
	</head>

	<body>
	<section class="table">
	<table>
	<!--It's a Sator Square. Don't worry about it.-->
	<tr><th>S</th><th>A</th><th>T</th><th>O</th><th>R</th></tr>
	<tr><th>A</th><th>R</th><th>E</th><th>P</th><th>O</th></tr>
	<tr><th>T</th><th>E</th><th>N</th><th>E</th><th>T</th></tr>
	<tr><th>O</th><th>P</th><th>E</th><th>R</th><th>A</th></tr>
	<tr><th>R</th><th>O</th><th>T</th><th>A</th><th>S</th></tr>
	</table>
	</section>
	</body>

	</html>